|
Publié le par Chloé MAHALIN

Angular 4

Ajouter un composant enfant à un composant

Prérequis, set-up d'un projet Angular.

Après le setup d'une application angular via la commande 'ng new MyPorject', un seul composant est disponible dans l'application créée :

src/app/
    |
    |____app.component.css
    |____app.component.html
    |____app.component.ts
    |____app.module.ts

C'est le composant de base de l'application, le composant root. Nous ne sommes pas supposés mettre l'ensemble d'un site web dans un seul composant. Il faut éclater l'application en plusieurs composants et les faire communiquer.

Voici les éléments à remplir pour ajouter un composant au composant natif (et après c'est toujours la même chose) :

1) Créez votre nouveau composant :

src/app/components/login
    |
    |____login.component.css
    |____login.component.html
    |____login.component.ts

login.composant.html

<div>
    Login : <input [ngModel]="login" type="text"/>
    Password : <input [ngModel]="password" type="text"/>
    <button (click)='onClick()' >Validate</button>
</div>

login.composant.css

button {
    background-color: green;
}

login.composant.ts

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

@Component({
  selector: 'login-selector',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

    login: string = '';
    password: string = '';

    onClick() {
        alert('Login is : ' + this.login + ' and password is : ' +this.password);
    }
}

2) Déclarez votre composant dans la liste des modules disponibles du fichier app.module.ts :

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { LoginComponent } from './components/login/login.component';  //<--- Ici c'est le nom du fichier Typescript qui est dans le path, et le nom de l'objet dans l'import.

@NgModule({
  declarations: [
    AppComponent, LoginComponent  //<--- On le déclare ici
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3) Enfin, il vous suffit de rajouter votre nouveau composant au composant de base :

app.composant.html

<div>
    <login-selector></login-selector>
</div>

Et voila !

Vous pouvez maintenant tester votre application via la commande 'ng serve --open' !