at pipe

src/app/at.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { AtPipe } from './at.pipe';
+
+describe('AtPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AtPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/at.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'at',
+  standalone: true
+})
+export class AtPipe implements PipeTransform {
+
+  transform(value: unknown, ...args: unknown[]): string {
+    return '@'+value;
+  }
+
+}

src/app/shared/views/large-user/large-user.component.html

@@ -1,7 +1,7 @@
 <div class="user-container outline">
     <div [routerLink]="'/user/'+user?.username">
         <!-- <img [src]="user?.picture" class="outline"> -->
-        <span>{{user?.username}}</span>
+        <span>{{user?.username|at}}</span>
     </div>
     <!-- <span [classList]="user?.followed ? 'follow followed' : 'follow'"></span> -->
 </div>

src/app/shared/views/large-user/large-user.component.scss

@@ -21,10 +21,6 @@
             width: 100%;
             text-align: center;
         }
-
-        span::before {
-            content: '@';
-        }
     }
     
     .follow {

src/app/shared/views/large-user/large-user.component.ts

@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { User } from '../../../../model/User';
 import { RouterModule } from '@angular/router';
+import { AtPipe } from '../../../at.pipe';
 
 @Component({
     selector: 'app-large-user',
     standalone: true,
     templateUrl: './large-user.component.html',
     styleUrl: './large-user.component.scss',
-    imports: [RouterModule]
+    imports: [RouterModule,AtPipe]
 })
 export class LargeUserComponent {
   @Input() user: User | undefined;

src/app/shared/views/small-user/small-user.component.html

@@ -1,4 +1,4 @@
 <div [routerLink]="'/user/'+user?.username">
     <!-- <img [src]="user?.picture" class="outline"> -->
-    <span>{{user?.username}}</span>
+    <span>{{user?.username|at}}</span>
 </div>

src/app/shared/views/small-user/small-user.component.scss

@@ -15,8 +15,4 @@ span {
     margin: 20px auto;
     padding-left: 10px;
     transform: translateY(-60%);
-}
-
-span::before {
-    content: '@';
 }

src/app/shared/views/small-user/small-user.component.ts

@@ -1,11 +1,12 @@
 import { Component, Input } from '@angular/core';
 import { User } from '../../../../model/User';
 import { RouterModule } from '@angular/router';
+import { AtPipe } from '../../../at.pipe';
 
 @Component({
   selector: 'app-small-user',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule,AtPipe],
   templateUrl: './small-user.component.html',
   styleUrl: './small-user.component.scss'
 })