Scribd
Importer
965 vues3 pages

Correction TP Angular

Le document décrit un exemple d'utilisation d'Angular pour créer des composants, afficher des données et lier des variables. Il contient les étapes pour créer des composants, ajouter des boutons, inputs et afficher des listes de données.

Transféré par

olfa jabri
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
965 vues3 pages

Correction TP Angular

Le document décrit un exemple d'utilisation d'Angular pour créer des composants, afficher des données et lier des variables. Il contient les étapes pour créer des composants, ajouter des boutons, inputs et afficher des listes de données.

Transféré par

olfa jabri
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

3EB

Responsable:Olfa Jabri
Le datbindinag
Institut Supérieur de
Gestion Gabes

Exemple1

1) ouvrir le projet « my_app » déjà créé. Donner le titre « TP Angular » au composant


principale « app-root »
2) créer un nouveau composant "exercice"

Variable « image »

La somme deux variables A et B

Bouton désactiver

bouton

3) ajouter un bouton qui en cliquant affiche dans le console ‘salut tout le monde’
4) ajouter un input qui permet d’affiche ce que tu as saisi par le clavier(on utilise la directive
ngModel)

NB : pour utiliser les boutons et les inputs du formulaire il faut modifier le fichier « app
.[Link] »

4
correctionExemple1

5
Correction
<div class="container">
<table class="table">
<thead> public exercices:any[]=[
<tr> { id :1,
<th scope="col">#</th> name:'exercice1',
<th scope="col">First</th> des:'ffff',
<th scope="col">Last</th> pdfurl:'[Link]'}
<th scope="col">Handle</th>
</tr>
</thead> ];
<tbody class="table-group-divider">
<tr *ngFor="let i of exercices">
<th scope="row" >{{[Link]}}</th>
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
<td><a href="">{{[Link]}}</a></td>
</tr>

</tbody>
</table>
</div>

<h1 *ngIf="hotels && [Link]>0">{{title}}</h1>


<h2 *ngIf=" [Link]==0">No DATA</h2>
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col" *ngFor="let i of hotels">
<div class="card h-100">
<img src="{{[Link]}}" class="card-img-top" alt="{{[Link]}}">
<div class="card-body">
<h5 class="card-title">{{[Link]}}</h5>
<p class="card-text">{{[Link]}}</p>
</div>
</div>
</div> public hotels:any[]=[
</div> {hotelid :1,
</div> hotelname:'mouradi',
hoteldes:'ffff',
hotelprice:120,
imageurl:'../assets/image/[Link]'},
{hotelid :2,
hotelname:'la rosa',
hoteldes:'dddd',
hotelprice:220,
imageurl:'../assets/image/[Link]'},
{hotelid :3,
hotelname:'Hannibal',
hoteldes:'ddddddddddddddd',
hotelprice:220,
imageurl:'../assets/image/[Link]'}

];

Vous aimerez peut-être aussi