Informatique
Publié le 05/27/2017, rédigé par Chloé MAHALIN

Angular 4

Ajouter un composant enfant à un composant

Prérequis
- [set-up d'un projet Angular](/university/devops/nodejs_npm/initiate_a_project_with_angular_cli).

Après le setup d'une application angular via la commande 'ng new MyPorject'

C'est le composant de base de l'application

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

app.composant.html

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

Et voila !

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

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité