Angular - Mémo

Angular est un framework côté client, open source, basé sur TypeScript, et codirigé par l'équipe du projet « Angular » à Google et par une communauté de particuliers et de sociétés.

Dans cet article nous allons aborder quelques principes d'angular.

Remarque: Nous nous baserons sur angular 11.

 

1. Partager des données entre des composants parents et enfants

1.1 Partage des données du composant père au fils

Pour partager des données du composant père au fils il est nécessaire d'utiliser l'annotation "@Input()" dans le composant fils :

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

export class Child {
  @Input() public pageName: string;
}

 Les données sont passées du père au fils via des crochets (property binding) :

<app-child [pageName]="pageName"></app-child>

export class Father {
  pageName = 'The page name';
}

1.2 Partage des données du composant fils au père

Pour partager des données du composant fils au père il est nécessaire d'utiliser l'annotation "@Output()" dans le composant fils. Pour fournir la donnée au père, il est nécessaire d'envoyer un évènement (via EventEmitter). Cela aura pour effet d'appeler la fonction passé du père au fils avec les données fournis en paramètre.

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

export class Child {
    @Output() newEvent = new EventEmitter<string>();

    emitEvent() {
        this.newEvent.emit('test');
    }
}

 La fonction à appeller du père est fourni au fils à l'aide des parenthèse (event binding) :

<app-child (newEvent)="event($event)"></app-child>

export class Father {
    event(event: string) {
        // ...
    }
}

2. Récupération des informations d'un noeud

Afin de récupérer les informations d'un noeud, plusieurs solutions existent.

2.1 Utilisation de ViewChild avec les éléments DOM

<input type="password" class="form-control" #password placeholder="Password">

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

export class Component {
    @ViewChild('password') password: ElementRef;

    test(){
        const password = this.password.nativeElement.value;
    }
}

2.2 Utilisation de ViewChild avec des composants enfant

Il est possible de récupérer le composant enfant via ViewChild. Dans le composant parent :

export class PageEditorComponent {
      @ViewChild('childComponent') childComponent: ChildComponent;
}

<app-child-component #childComponent></app-child-component>

3. Exemple de directive

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

@Directive({
  selector: '[appRouteTransformer]'
})
export class RouteTransformerDirective {
  constructor() { }

  @HostListener('click', ['$event'])
  public onClick(event): boolean {
    try {
      let elementA = event.target;
      if (elementA.tagName !== 'A') {
        alert('A');
      }
    } catch (error) {
      return true;
    }
    return true;
  }
}

4. Exemple de pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeHtmlPipe' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) { }

  transform(html: string) {
    return this.sanitizer.bypassSecurityTrustHtml(html);

  }
}

5. Exemple d'intercepteur HTTP

import { HttpRequest, HttpHandler, HttpInterceptor} from '@angular/common/http';

@Injectable()
export class PageHttpInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (request.url.startsWith('https://')) {
            alert('https');
        }
    }
}

6. Exemple d'évènement

<a (click)="logout()" class="nav-link" href="#">Logout</a>

logout() {
    alert('logout');
}

 7. Exemple de service

@Injectable({
  providedIn: 'root'
})
export class PageService {
  /** Base URL of service */
  private baseWSUrl = environment.serviceUrl.urlBase + environment.serviceUrl.page.base;

  constructor(private http: HttpClient) { }

  public serviceGet(theId: number): Observable<string> {
    return this.http.get<string>(this.baseWSUrl + '/getById/', { params: { id: theId.toString() } });
  }

  public servicePost(page: PageDTO): Observable<DTOGeneric<number>> {
    return this.http.post<DTOGeneric<number>>(this.baseWSUrl + '/save/', JSON.stringify(page),
      { headers: { 'Content-Type': 'application/json', } });
  }
}

8. Les composants

8.1 Les boucles

nombres: [] = [1, 2, 3, 4, 5]

<ul>
    <li *ngFor="let nombre of nombres">{{ nombre }}</li>
</ul>

8.2 Affichage conditionnel

<p *ngIf="isConnected">The user is connected</p>

 

<div [ngSwitch]="user.role">
   <p *ngSwitchCase="'ADMIN'">Admin</p>
   <p *ngSwitchCase="'MEMBER'">Member</p>
</div>

9. Actions sur les tableaux

méthode	Description
concat	Retourne la jointure de plusieurs tableaux
copyWithin	Copie des éléments du tableau à partir  d'une position et le nombre d'éléments copiés
entries	Renvoit un tableau contenant les clés/valeurs
every	Vérifie si chaque élément du tableau valide le test
fill	Remplit les éléments d'un tableau avec une valeur
filter	Filtre les données
find	Renvoie la valeur du premier élément validant un test
findIndex	Renvoie l'index du premier élément validant un test
forEach	Appelle une fonction pour chaque élément du tableau
from	Crée un tableau à partir d'un objet
includes	Vérifie si un tableau contient l'élément spécifié
indexOf	Recherche dans le tableau un élément et renvoie sa position
isArray	Vérifie si un objet est un tableau
join	Joint tous les éléments d'un tableau dans une chaîne
keys	Renvoie un itérateur contenant les clés du tableau d'origine
lastIndexOf	Recherche dans le tableau un élément, en commençant par la fin, et renvoie sa position
map	Map tous les objets contenus dans le tableau
pop	Supprime le dernier élément d'un tableau et renvoie cet élément
push	Ajoute de nouveaux éléments à la fin d'un tableau et renvoie la nouvelle longueur
reduce	Réduit les valeurs d'un tableau à une seule valeur (de gauche à droite)
reduceRight	Réduit les valeurs d'un tableau à une seule valeur (de droite à gauche)
reverse	Inverse l'ordre des éléments dans un tableau
shift	Supprime le premier élément d'un tableau et renvoie cet élément
slice	Sélectionne une partie d'un tableau et renvoie le nouveau tableau
some	Vérifie si l'un des éléments d'un tableau réussit un test
sort	Trie les éléments
splice	Ajoute/Supprime des éléments d'un tableau
toString	Convertit le tableau en chaîne et renvoie le résultat
unshift	Ajoute de nouveaux éléments au début d'un tableau et renvoie la nouvelle longueur
valueOf	Renvoie la valeur primitive d'un tableau

10. Les principales commandes CLI

10.1 Installation

npm install -g @angular/cli

10.2 Utilisation

Commande	Description
build	Compile le projet angular et génère le dossier dist
generate	Génère et/ou modifie des fichiers basés sur un schéma (app-shell, application, class, component, directive, enum, guard, interceptor, interface, library, module, pipe, resolver, service, service-worker, web-worker)
lint	Exécute les outils de lint sur le code de l'application
new	Créé un projet angular
serve	Construit et lance l'application, en reconstruisant les modifications de fichier
test	Exécute des tests unitaires
update	Met à jour l'application et ses dépendances

11. Exemple de routing

Fichier app-routing.module.ts

const routes: Routes = [
  {
    path: 'user', children: [
      { path: 'manager.html', component: UserManagerComponent },
    ]
  },
  { path: 'content/manager.html', component: ContentManagerComponent },
];

@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabled',
    relativeLinkResolution: 'legacy'
}), CommonModule],
  exports: [RouterModule],
})
export class AppRoutingModule { }

12. Les liens et le router-outlet

Fichier menu.component.html

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}">
  link to user component
</a>

Fichier app.component.html

<router-outlet></router-outlet>

13. Exemple de layout dynamique

Fichier layout.component.html

<div class="layout__content">    
    <ng-content></ng-content>
</div>

Fichier test.component.html

<layout>
    Hello
<layout>