Dernière modification : 23/08/2022

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>

LauLem.com - Conditions Générales d'Utilisation - Informations Légales - Charte relative aux cookies - Charte sur la protection des données personnelles - A propos