Create an Angular component TestComponent having a test-component selector-CodePudding

i have to create an Angular component named TestComponent and having test-component for selector. The component must declare an input of type Array <string> named inputData. if there is no input data (empty or missing inputData), you must write "No data" in a div with id = "noData". If the inputData array is not empty, the div must not not be present in the DOM of the page.

if the array contains at least one element, you must write the strings of this array in separate divs. These divs must be the children of a div with id = "dataList". If the length of a string is odd , then the text must be written in red red, otherwise in green green.

here is the html rendering of a preview:

<test-component>
    <div id="noData">No data</div>
    <div id="dataList"></div>
</test-component>
<test-component>
    <div id="dataList">
        <div style="color: red;">Odd</div>
        <div style="color: green;">Even</div>
    </div>
 </test-component>

Here is the code:

import {Component , NgModule,Input} from '@angular/core';
import {CommonModule } from '@angular/common';

@Component({

    selector:'test-component',
    template: `
    
    `,
    })
    
export Class TestComponent{

  constructor(){
  
  }
  
  }

This is my solution:

 import {Component , NgModule,Input} from '@angular/core';
    import {CommonModule } from '@angular/common';

    @Component({

        selector:'test-component',
        template: `
        <div id="noData">No data</div>
        <div id="dataList">{{length}}</div>
        <test-component>
            <div id="dataList">
                <div style="color:red;">Odd</div>
                <div style="color: green; ">Even</div>
             <div>
             (output)="setColor($event)"
         </test-component>
        
        `,
        })
        
    export Class TestComponent{
        @Input() inputData:Array<string>=null;
        @Input() color:string='red';
        
        public length:number;
        setColor(event:number){
        if(event%2===1){
          this.color="red";
          }else if(event%2===0){
          this.color="green";
          }
          
      constructor(){
      
      }
      
      }

But i think it is wrong, indeed i didn't know how to use the words "Even" and "Odd" in my code, i think something is missing, what do you think please?

CodePudding user response：

In TestComponent

export class TestComponent {
  @Input() inputData: Array<string> = null;
  constructor() {}
}

In TestComponent template

<ng-container *ngIf="inputData && inputData.length; else noData" >
  <div *ngFor="let s of inputData" id = "dataList">
    <div [style.color]="(s.length)%2==0 ? 'green' : 'red'">
      {{s}} 
    </div>
  </div>
</ng-container>

<ng-template #noData>
  <div id = "noData">
    No Data
  </div>
</ng-template>

To call TestComponent from another components

inputData = ['Test', 'Test1', 'Test', 'Test2', 'Test', 'F'];

// In template

<test-component [inputData]="inputData"></test-component>

Angular demo