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.
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) :
export class Father {
pageName = 'The page name';
}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();
emitEvent() {
this.newEvent.emit('test');
}
} La fonction à appeller du père est fourni au fils à l'aide des parenthèse (event binding) :
export class Father {
event(event: string) {
// ...
}
}Afin de récupérer les informations d'un noeud, plusieurs solutions existent.
import { ViewChild, ElementRef } from '@angular/core';
export class Component {
@ViewChild('password') password: ElementRef;
test(){
const password = this.password.nativeElement.value;
}
}Il est possible de récupérer le composant enfant via ViewChild. Dans le composant parent :
export class PageEditorComponent {
@ViewChild('childComponent') childComponent: ChildComponent;
}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;
}
}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);
}
}import { HttpRequest, HttpHandler, HttpInterceptor} from '@angular/common/http';
@Injectable()
export class PageHttpInterceptor implements HttpInterceptor {
constructor() { }
intercept(request: HttpRequest, next: HttpHandler): Observable> {
if (request.url.startsWith('https://')) {
alert('https');
}
}
} Logoutlogout() {
alert('logout');
}@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 {
return this.http.get(this.baseWSUrl + '/getById/', { params: { id: theId.toString() } });
}
public servicePost(page: PageDTO): Observable> {
return this.http.post>(this.baseWSUrl + '/save/', JSON.stringify(page),
{ headers: { 'Content-Type': 'application/json', } });
}
} nombres: [] = [1, 2, 3, 4, 5]
- {{ nombre }}
The user is connected
Admin
Member
| 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 |
npm install -g @angular/cli| 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 |
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 { }Fichier menu.component.html
link to user component
Fichier app.component.html
Fichier layout.component.html
Fichier test.component.html
Hello