You are asked to create a simple Angular component named CounterComponent having counter-component for selector. The purpose of this component is to: Take a message in "input" Read an interval value entered by the user (integer, in milliseconds) Send the message as events periodically to its "output" At the HTML level, the component is composed of an field with id="intervalInput" and a button with id="intervalSetButton" . The user can change the interval by entering a value in the field then clicking on the button.

The component must have an @Input named message and an @Output named tick . It should generate "string" type events to tick at regular intervals corresponding to the value entered by the user. The string used to generate the events comes from the "input" message. The component must be able to handle message changes and value changes of the interval. Notes: You must modify the template as well as the class of the component. A block of "Preview" is available to allow you to debug your code. It displays your component below. You can open it and modify it as you wish. To help you, this block contains a parent component that manipulates the component you need to create (displaying a counter next to the message) This block of "Preview" is not taken into account in the calculation of the score of your code

 // Angular 8.x code 2 import { Component, NgModule } from '@angular/core'; 3 4 5 @Component({ 6 selector:'counter-component', 7 template: ` 8 <input id="intervalInput"/> 9 <button id="intervalSetButton">Set interval</button> 10 ` 11 }) 12 export class CounterComponent { 13 } 14 15 // #region Preview 16 @Component({ 17 selector:'display-component', 18 template: ` 19 <counter-component [message]="'Hello world'" (tick)=counterTick($event)></countercomponent> 20 <div>{{message}} {{counter}}</div> 21 ` 22 }) 23 export class DisplayComponent { 24 public counter: number = 0; 25 public message: string; 26 27 public counterTick(message: string): void { 28 this.message = message; 29 this.counter++; 30 } 31 } 32 33 @Component({ 34 template: `<display-component></display-component>` 35 }) 36 export class PreviewComponent { } 37 // #endregion Preview 38 39 // #region Module declaration - Do not Change 40 @NgModule({ 41 declarations: [PreviewComponent, DisplayComponent, CounterComponent], 42 entryComponents: [PreviewComponent] 43 }) 44 export class PreviewModule { } 45 // #endregion Module declaration

voici la reponse 

https://stackblitz.com/edit/angular-ivy-mgta53?file=src%2Fapp%2Fcounter.component.ts

-
Edité par oussamabenabdallah4 16 octobre 2022 à 19:01:50

better to avoid [(NgModel)] since it is required to import it in @NgModule

below solution is more simple and you need only to change CounterComponent:

https://stackblitz.com/edit/counter-codingame?file=README.md

Enjoy

import { Component, Output, Input, EventEmitter, OnDestroy, } from '@angular/core';

@Component({
  selector: 'counter-component',
  template: `
  <input id="intervalInput" type="number" [value]="inputValue" (input)="setValue($event)"/>
  <button id="intervalSetButton" (click)="setPeriod()">Set interval</button>
  `,
})
export class CounterComponent implements OnDestroy {
  public inputValue: string = '';
  public thePeriod: any; //NodeJS.Timer;

  @Input() message!: string;
  @Output() public tick: EventEmitter<string> = new EventEmitter();

  public setValue(e: Event) {
    const target = e.target as HTMLTextAreaElement;
    this.inputValue = target.value;
  }

  public setPeriod(): void {
    this.thePeriod = setInterval(() => this.tick.emit(this.message), +this.inputValue);
  }

  ngOnDestroy(): void {
    clearInterval(this.thePeriod);
  }
}

-
Edité par AbdeAMNR 27 décembre 2022 à 1:42:25