Angular :Component
Une application android se compose de plusieurs components: une component reprenste une View et un logique de traitement ;chanque component est indépendante
Exemple1:Inline Template
Component2.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-component2',//sera utilisé pour appeler pour insérer le component dans une autre component
template: `
<div class="class1">
<p>Text from HTML</p>
<p>Data from logique :{{attribut1}}</p>
</div> `,
styles: [`
.welcome {
color:blue;
font-size:20px;
}
`]
})
export class Component2Component {
attribut1:string="Hi from logique "
}
Exemple2:Fichiers séparés .html et .ts
Component3.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-component3',
templateUrl: './component3.component.html',//le fichier View
styleUrls: ['./component3.component.css']
})
export class Component3Component {
attribut1:string="hello from logique"
}
Component3.component.html
<p>{{attribut1}}</p>
Exercices Créer la layout suivante:
Créer le component:HeaderComponent
components/HeaderComponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {
}
components/header.component.html
<div class="header">
Header content
</div>
components/header.component.css
.header{
background-color: #eee;
border: 1px solid #555;
}
Ajouter Header à la components principale app.component.html
app.component.html
<router-outlet>
<!--appler la component Header en utilisant:
selector: 'app-header',-->
<app-header></app-header>
</router-outlet>
