@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html'
})
export class HeroComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

<p>Hello, {{ userName }}!</p>

<img [src]="imageUrl">

<button (click)="onSave()">Save</button>

<input [(ngModel)]="userName">

<div *ngIf="isLoggedIn">Welcome back!</div>

<li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>

<div [ngClass]="{ active: isActive, disabled: isDisabled }"></div>

<div [ngStyle]="{ color: textColor, 'font-size.px': fontSize }"></div>

<p>{{ birthday | date:'longDate' }}</p>
<p>{{ price | currency:'USD' }}</p>

this.http.get<User[]>('/api/users').subscribe(users => this.users = users);

@Input() userName: string;
@Output() save = new EventEmitter<void>();

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'users/:id', component: UserDetailComponent }
];

ng generate component user-profile
ng build --configuration production
ng serve

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Hero</p>`
})
export class HeroComponent {}

trackById(index: number, item: Item): number {
  return item.id;
}

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    return value.length > limit ? value.slice(0, limit) + '...' : value;
  }
}

@Injectable({ providedIn: 'root' })
export class UserService {
  getUsers() { return this.http.get('/api/users'); }
}

this.http.get('/api/data').pipe(
  map(res => res.items),
  filter(items => items.length > 0)
).subscribe(items => this.items = items);

<div *ngIf="user$ | async as user">{{ user.name }}</div>

ngOnDestroy() {
  this.subscription.unsubscribe();
}

intercept(req: HttpRequest<any>, next: HttpHandler) {
  const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
  return next.handle(authReq);
}

ngOnInit() {
  this.loadData();
}

ngOnChanges(changes: SimpleChanges) {
  if (changes['userId']) this.loadUser();
}

// child
@Output() itemSelected = new EventEmitter<Item>();
select(item: Item) { this.itemSelected.emit(item); }
// parent template
<app-child (itemSelected)="onItemSelected($event)"></app-child>

@ViewChild('nameInput') nameInput: ElementRef;
ngAfterViewInit() {
  this.nameInput.nativeElement.focus();
}

// card.component.html
<div class="card"><ng-content></ng-content></div>
// usage
<app-card><p>Hello</p></app-card>

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn() || inject(Router).parseUrl('/login');
};

{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}

this.form = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]]
});

email: ['', [Validators.required, Validators.email]]

providers: [{ provide: ApiService, useClass: MockApiService }]

<ng-container *ngIf="showDetails">
  <h2>Title</h2>
  <p>Description</p>
</ng-container>

TestBed.configureTestingModule({ declarations: [MyComponent] });
const fixture = TestBed.createComponent(MyComponent);

export const authGuard: CanActivateFn = () => {
  return inject(AuthService).isLoggedIn();
};

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

// index.ts
export * from './user.service';
export * from './user.model';

@Component({
  selector: 'app-item',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ItemComponent {}

const count = signal(0);
count.set(count() + 1);
const doubled = computed(() => count() * 2);

function forbiddenNameValidator(control: AbstractControl): ValidationErrors | null {
  return control.value === 'admin' ? { forbiddenName: true } : null;
}

this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);

<ng-template #loading><p>Loading...</p></ng-template>
<div *ngIf="data; else loading">{{ data }}</div>

trigger('fade', [
  state('void', style({ opacity: 0 })),
  transition(':enter', animate('300ms'))
])