I have an component called details which is an child component, Which will display the selected object properties from the other child component called list as in the below image:

enter image description here

details.component.html

<div classs="details-sec">
 <h3>Customer Details </h3>
  <div>Name : {{contact?.name}}</div>
  <div>Age : {{contact?.age}}</div>
</div>

details.component.ts

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

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent {
  @Input()
  public contact;

}

Expected Result: If the list component doesn't have any data to emit,

  • Then in details components it should hide details-sec (i,e name,age)
  • Should display some text.

Something like this:

enter image description here

Tried this question, it didn't worked for me.

DEMO

3 Answers

1
ashish.gd On Best Solutions

You can simply check for contact property to show the details, else show a different template with the needed message.

Example:

details.component.html

<div classs="details-sec" *ngIf="contact; else noDetails">
 <h3>Customer Details </h3>
  <div>Name : {{contact?.name}}</div>
  <div>Age : {{contact?.age}}</div>
</div>

<ng-template #noDetails>
    <div>
        <p>No customer available... </p>
    </div>
</ng-template>
0
porgo On

You should try to add an Input value to your component, for example hasCustomers which should be set in parent if there are any Customers on list.

Then just use *ngIf="hasCustomers" and display text which you want.

The html file should be like this:

<div classs="details-sec" *ngIf="hasCustomers">
 <h3>Customer Details </h3>
  <div>Name : {{contact?.name}}</div>
  <div>Age : {{contact?.age}}</div>
</div>
<div *ngIf="!hasCustomers">
  No customer are available
</div>
-1
Community On

You can do ngIf in angular go see this link.

[https://angular.io/api/common/NgIf][1]

[1]: Angular Ngif