Angular : comment sélectionner mat-select par défaut ?
Le framework Angular propose sa propre façon d'écrire l'interface de votre site internet. Il utilise des composants et un système de templates. Les templates utilisés par le framework mélangent des codes HTML et des balises spéciales propres au framework. Ces balises vont être transformées ensuite en codes HTML lors de la construction du projet. C'est notamment le cas de la balise "mat-select".
La balise "mat-select" est utilisée par le framework Angular pour afficher une liste déroulante. Pour utiliser cette balise, vous devez au préalable avoir importé le module "FormsModule" dans votre application. On effectue cet import dans le fichier "main.ts" situé à la racine du projet. Le fait d'utiliser cette balise permet de "lier" la liste déroulante à votre composant. Elle devient un attribut du composant. On peut obtenir sa valeur quand on le souhaite et la modifier directement si on en a besoin. Le nom de l'attribut à utiliser dans votre composant est celui défini par l'attribut entouré d'une parenthèse et d'un crochet. Pour lui attribuer une valeur par défaut, il n'y a plus qu'à changer la valeur de l'attribut du composant lors de l'affichage du formulaire. Vous devez utiliser le même type de valeur pour définir la valeur par défaut : une chaîne de caractères si votre liste déroulante est un choix de chaînes de caractères par exemple.
//main.ts
@NgModule({
imports: [
…
FormsModule,
…
//component.html
Vert
Bleu
//component.js
export class exempleFormulaire {
//Sélection par défaut
couleur = 'vert';
}