menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE




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

ng generate component components/Header

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>




Veuillez Créer les autres components




By Hakiki