Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
10 views2 pages

Correction Ex1 Angular

The document provides an Angular implementation of a Product class and its corresponding component for managing product details. It includes a constructor for initializing product attributes, a template for displaying product information, and functionality for incrementing the product ID and modifying the color. The App component demonstrates the use of the Product component with different color inputs.

Uploaded by

israa.mhamdi7627
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views2 pages

Correction Ex1 Angular

The document provides an Angular implementation of a Product class and its corresponding component for managing product details. It includes a constructor for initializing product attributes, a template for displaying product information, and functionality for incrementing the product ID and modifying the color. The App component demonstrates the use of the Product component with different color inputs.

Uploaded by

israa.mhamdi7627
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Correc on Exercice 1 - Angular

export class Product {


//par défaut les attributs sont public
id!:number;//initialisation obligatoire
title!:string;
categories? : string[]; //pouvant être nulle
image?:string;

//constructeur
constructor(id:number, title:string, categories?: string[], image?:
string){
this.id = id; this.categories =categories;
this.image=image;this.title=title;
}
}

Product.component.ts

import { Component, Input, OnInit } from '@angular/core';


import { Product } from '../model/product';
import { NgFor, NgIf } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-product',
standalone: true,
imports: [NgFor, NgIf, FormsModule],
templateUrl: './product.component.html',
styleUrl: './product.component.css'
})
export class ProductComponent implements OnInit{

//gérer un produit --> attribut de type product


product!:Product; //obligatoire
@Input() color?:string;

ngOnInit()
{
this.product = new Product(1,'Iphone 9', ['smartphone',
'electronic'],'https://cdn.dummyjson.com/product-images/1/thumbnail.jpg');
if(this.color==undefined)
this.color= 'white';
}

Page | 1
augmenter()
{this.product.id ++;}

}
Product.component.html

<h1>Gestion du produit</h1>
<table border="1" aign="center" [style.background-color]="color">
<tr>
<th>id</th><td>{{product.id}}</td></tr>
<tr><th>title</th><td>{{product.title}}</td></tr>
<tr> <th>image</th><td><img [src]="product.image"></td></tr>
<tr>
<th>Categories</th>
<td >
<p *ngIf="product.categories == undefined; else elseBlock">Liste
vide</p>

<ng-template #elseBlock>
<ul>
<li *ngFor="let c of product.categories">
{{c}}
</li>
</ul>
</ng-template>

</td>
</tr>
<tr>
<td></td><td>
<button (click)="augmenter()">Incrementer id</button><br><br>

</td>
</tr>
<tr>
<th>
Modifier color :
</th> <td>
<input type="text" [(ngModel)]=" color">
</td>
</tr>
</table>

App.component.html

<app-product color="red"></app-product>
<app-product color="green"></app-product>
<app-product></app-product>

Page | 2

You might also like