Tutos Angular

Filtrer par tag : angular_introcomposantstemplatesservicesinjection_dependanceformulairesngmodulesangular_clitypescript

Binder tous les types de champs de formulaire Angular (text, radio, checkbox, etc.)

Binder tous les types de champs de formulaire Angular (text, radio, …

Un formulaire Angular peut contenir de nombreux types de champs (text, select, radio, checkbox…). Cette recette …

#069 | | formulaires

Qu’est-ce qu’un composant Angular ? (syntaxe classe + template)

Qu’est-ce qu’un composant Angular ? (syntaxe classe + template)

Cette recette présente les 3 principales caractéristiques d’un composant Angular et la syntaxe de base pour en …

#004 | | composants

Créer un formulaire réactif Angular

Créer un formulaire réactif Angular

Cette recette montre comment créer un formulaire réactif Angular. On part d’un formulaire HTML standard, puis on …

#065 | | formulaires

Choisir entre formulaire réactif et formulaire piloté par le template (reactive form vs. template-driven form)

Choisir entre formulaire réactif et formulaire piloté par le template ( …

Angular propose deux syntaxes pour gérer les formulaires : les formulaires réactifs (reactive forms) et les formulaires …

#064 | | formulaires

Qu’est-ce qu’un formulaire Angular ?

Qu’est-ce qu’un formulaire Angular ?

Cette recette présente les 3 principales caractéristiques de tout formulaire Angular (exécuté côté client ; utilise les …

#062 | | formulaires

Situer Angular dans le stack technique (back-end, front-end)

Situer Angular dans le stack technique (back-end, front-end)

Pour bien utiliser Angular, il est essentiel de comprendre où il se situe dans la pile de toutes les technologies …

#002 | | angular_intro

Présentation d’Angular - Quelles applis “SPA” peut-on coder avec Angular ?

Présentation d’Angular - Quelles applis “SPA” peut-on …

Angular est un framework JavaScript qui permet de créer des single page applications, ou SPA. Qu’est-ce …

#001 | | angular_intro

Les 3 “briques” de base d’une appli Angular : Composants, Services, Modules

Les 3 “briques” de base d’une appli Angular : Composants, …

Toute application Angular se compose de trois briques fondamentales : les composants qui représentent l’interface, …

#003 | | angular_intro

Utiliser export et import dans Angular

Utiliser export et import dans Angular

Vous avez sûrement repéré les mots-clé export et import dans l’application Angular que nous avons créée. À quoi …

#050 | | typescript_angular

Regrouper les champs de formulaire dans un FormGroup

Regrouper les champs de formulaire dans un FormGroup

Regrouper les champs de formulaire dans un FormGroup

#068 | | formulaires

Les valeurs truthy et falsy en JavaScript

Les valeurs truthy et falsy en JavaScript

Que signifient les concepts de “truthy” et “falsy” en JavaScript ? Quelles valeurs sont …

#101 | | javascript

Exécuter une action à la soumission d’un formulaire Angular

Exécuter une action à la soumission d’un formulaire Angular

Cette recette montre comment intercepter la soumission d’un formulaire et comment déclencher différents types …

#070 | | formulaires

Afficher du texte dynamiquement avec l’interpolation

Afficher du texte dynamiquement avec l’interpolation

L’interpolation est une syntaxe qu’on peut utiliser dans un template de composant Angular et qui permet …

#009 | | templates

Décorateurs TypeScript (+ décorateurs Angular fréquents)

Décorateurs TypeScript (+ décorateurs Angular fréquents)

Décorateurs TypeScript (+ décorateurs Angular fréquents)

#128 | | typescript_angular

Différence entre un module JavaScript et un module Angular

Différence entre un module JavaScript et un module Angular

Le terme “module” ne désigne pas la même chose selon qu’il s’applique au langage JavaScript ou …

#127 | | javascript_es6typescript_angularngmodules

Le composant racine d’une appli Angular

Le composant racine d’une appli Angular

Le composant racine d’une application Angular — root component en anglais - est le composant qui se trouve au …

#005 | | composants

Pourquoi typer les réponses HTTP ?

Pourquoi typer les réponses HTTP ?

Par défaut, la méthode HttpClient.get() parse les données JSON renvoyées par le serveur en un type Object anonyme. Il …

#081 | | http

Pourquoi this fonctionne correctement dans une fonction fléchée ?

Pourquoi this fonctionne correctement dans une fonction fléchée ?

Un des bénéfices des fonctions fléchées est que this est bindé au contexte dans lequel la fonction est définie, et non …

#079 | | javascript

Le “scope” des templates de composant

Le “scope” des templates de composant

Le scope a disparu à partir d’Angular 2, en tout cas dans le sens où on l’entendait avec AngularJS. Dans ces …

#059 | | templates

Déclarer une dépendance / un provider

Déclarer une dépendance / un provider

Avant de pouvoir injecter une dépendance, il faut la déclarer en la listant dans les providers d’un module ou …

#055 | | servicesinjection_dependance

Comprendre les Inputs et Outputs de composant

Comprendre les Inputs et Outputs de composant

Les Inputs et Outputs permettent à deux composants parent-enfant de communiquer entre eux. Quelle est leur syntaxe et …

#053 | | composants

Quand utiliser var, let ou const ?

Quand utiliser var, let ou const ?

Quand utiliser var, let ou const ?

#049 | | javascript_es6typescript

Imbriquer deux composants (différence entre ViewChild et ContentChild)

Imbriquer deux composants (différence entre ViewChild et ContentChild)

L’interface d’une application Angular se compose de composants imbriqués les uns dans les autres. Dans cette …

#045 | | composants

Préserver le contenu situé entre les balises d’un composant (<ng-content>)

Préserver le contenu situé entre les balises d’un composant ( …

Préserver le contenu situé entre les balises d’un composant (<ng-content>)

#041 | | templates

Trouver la liste des propriétés DOM d&rsquo;une balise HTML

Trouver la liste des propriétés DOM d’une balise HTML

Les propriétés DOM disponibles dépendent de la balise dans laquelle on écrit le binding. Voyons comment les trouver.

#034 | | templates

Templates chaîne (ES6, TypeScript)

Templates chaîne (ES6, TypeScript)

Templates chaîne (ES6, TypeScript)

#028 | | javascript_es6typescript

Fonctions fléchées (ES6, TypeScript)

Fonctions fléchées (ES6, TypeScript)

Les fonctions fléchées sont une syntaxe raccourcie pour les expressions de fonction. Elles omettent le mot-clé function …

#027 | | javascript_es6typescript

Classes TypeScript

Classes TypeScript

Classes TypeScript

#025 | | javascript_es6typescript

Interfaces TypeScript

Interfaces TypeScript

Interfaces TypeScript

#024 | | typescript

Types de base TypeScript : primitives, tableaux, objets

Types de base TypeScript : primitives, tableaux, objets

Les types sont au coeur du langage TypeScript (ils ont d’ailleurs donné son nom au langage). Comment sont-ils …

#023 | | typescript

Utiliser la technique du CoreModule Angular

Utiliser la technique du CoreModule Angular

Une application Angular possède souvent un CoreModule qui contient les services de base de l’application. Comment …

#018 | | ngmodules

Utiliser la technique du SharedModule Angular

Utiliser la technique du SharedModule Angular

Une application Angular possède souvent un SharedModule qui contient les éléments réutilisables de l’application. …

#017 | | ngmodules

Créer un service avec Angular CLI (ng generate service)

Créer un service avec Angular CLI (ng generate service)

Un service Angular est une classe TypeScript décorée avec @Injectable(). Cette classe peut être créée avec le CLI ou …

#014 | | servicesangular_cli

Qu&rsquo;est-ce qu&rsquo;un service Angular ?

Qu’est-ce qu’un service Angular ?

Un service est un bout de code, une classe, qui peut contenir du code réutilisable, ou des données qu’on veut …

#013 | | services

Afficher le même composant dans plusieurs modules Angular

Afficher le même composant dans plusieurs modules Angular

Vous avez créé un composant dans le ModuleA et vous voulez l’afficher dans le ModuleB. Mais par défaut, un …

#054 | | composantsngmodules

Afficher un composant Angular

Afficher un composant Angular

Il ne suffit pas de créer un composant pour qu’il soit affichable via son sélecteur. Il ne faut pas oublier de le …

#008 | | composants

Créer un composant avec Angular CLI (ng generate component)

Créer un composant avec Angular CLI (ng generate component)

Dans cette recette, je vous montre comment utiliser la commande ng generate component de Angular CLI, ou son raccourci …

#007 | | composantsangular_cli

Découper l&rsquo;interface en composants (arbre des composants)

Découper l’interface en composants (arbre des composants)

L’interface d’une application Angular se compose de plusieurs composants imbriqués les uns dans les autres. …

#010 | | composants