📚 Cheatsheet

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({ ... })
export class MonComposant implements AfterViewInit {
  @ViewChild('monInput') inputElement: ElementRef;

  ngAfterViewInit() {
    this.inputElement.nativeElement.focus();
  }
}

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

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-alerte',
  standalone: true,
  imports: [CommonModule],
  template: `<div *ngIf="visible">Alerte !</div>`
})
export class AlerteComponent {
  visible = true;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-racine',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titre = 'mon-app';
}

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-mon-composant',
  template: '...', 
  styles: ['...'],
  encapsulation: ViewEncapsulation.Emulated // ou .None ou .ShadowDom
})
export class MonComposant {}

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({ ... })
export class ProfilComponent implements OnChanges {
  @Input() userId: number;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.userId) {
      console.log('userId a changé:', this.userId);
    }
  }
}

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({ ... })
export class StreamComponent implements OnDestroy {
  private subscription: Subscription;

  ngOnDestroy(): void {
    this.subscription.unsubscribe(); // Nettoyage pour éviter les fuites mémoire
  }
}

import { Component, OnInit } from '@angular/core';

@Component({ ... })
export class ListeComponent implements OnInit {
  ngOnInit(): void {
    console.log('Le composant est initialisé !');
    // Idéal pour les appels de données initiaux
  }
}

import { Component, Input } from '@angular/core';

@Component({ ... })
export class CarteUtilisateurComponent {
  @Input() nomUtilisateur: string = '';
}

import { Component, Output, EventEmitter } from '@angular/core';

@Component({ ... })
export class BoutonActionComponent {
  @Output() action = new EventEmitter<void>();

  onClick() {
    this.action.emit();
  }
}

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({ selector: '[appSurligner]' })
export class SurlignerDirective {
  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = null;
  }
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'initiales' })
export class InitialesPipe implements PipeTransform {
  transform(valeur: string): string {
    return valeur.split(' ').map(n => n[0]).join('');
  }
}