Scribd
Upload
5 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
5 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy