CODEWITHSUNDEEP
angular2-nativescript
Mohammadreza99
Mohammadreza99

Reputation: 51

In nativescript-angular how to check whether <ng-content> is empty?

in my nativescript-angular project I have a component like this:

<StackLayout>
    <Label *ngIf="ngContentIsEmpty"> ng-content is empty </Label>
    <ng-content></ng-content>
</StackLayout>

Now, I would like to display some content if <ng-content> for this component is empty.Is there an easy way to do this?

I've tried this but not work in nativescript:

<StackLayout #wrapper>
    <Label *ngIf="wrapper.childNodes.length == 0"> ng-content is empty </Label>
    <ng-content></ng-content>
</StackLayout>

Upvotes: 1

Views: 258

Answers (1)

FrontEnd-er
FrontEnd-er

Reputation: 663

Try to this for check ng-content is empty.

Add In Html File:-

<StackLayout *ngIf="ngContentIsEmpty">Content</StackLayout>
<StackLayout #wrapper>
    <ng-content></ng-content>
</StackLayout>

In TypeScript File:- 

export class MyComponent implements OnInit, AfterContentInit {

  @ContentChild('wrapper') wrapper:ElementRef;
  public ngContentIsEmpty = false;

  ngAfterContentInit() {
   this.ngContentIsEmpty= this.wrapper.childNodes.length > 0;
  }

}

Upvotes: 1

Related Questions