How to extract angular component output to an outer div

Question

I would like to display different lists (defined by a component), but display their headers only if a necessary Output is produced by the child component.

Say I have a component that, among other things, @Outputs an event, like so

export class ItemListComponent implements OnInit {

  @Input()
  private filter: (t: Item) => boolean;

  private tasks: TaskItem[];

  @Output()
  isEmpty = new EventEmitter();

In my other component I display this list, by injecting a necessary filter, like so

<div> list header  <-- I would love to hide that -->
<app-item-list [filter]="filter" *ngIf="!(isEmpty)">
</app-item-list>
</div>

I can hide the item list depending on the (isEmpty), but can I hide the div above?

Please reproduce the issue on stackblitz. It helps contributors to help you. — Tilak Dewangan
– Tilak Dewangan, Commented Apr 4, 2019 at 11:28

Sarthak Aggarwal · Accepted Answer · 2019-04-04 13:20:52Z

2

You can use a variable in .parent.ts to hide and show your div

item-list.component.ts

export class ItemListComponent implements OnInit {

  @Input()
  private filter: (t: Item) => boolean;

  private tasks: TaskItem[];

  @Output()
  isEmpty = new EventEmitter(Boolean);

.parent.html

<div *ngIf="isShow"> list header  <-- I would love to hide that -->
<app-item-list [filter]="filter" *ngIf="!(isEmpty)" (isEmpty)="myFunc(e)">
</app-item-list>
</div>

.parent.ts

isShow = true;

myFunc(e){
  this.isShow = e;
}

edited Apr 4, 2019 at 13:20

answered Apr 4, 2019 at 11:29

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syam Prasad · Accepted Answer · 2019-04-04 11:55:49Z

1

Instead of using 'div' you can use 'ng-container'.

<ng-container*ngIf="isShow"> list header  <-- I would love to hide that -->
<app-item-list [filter]="filter" *ngIf="!(isEmpty)" (isEmpty)="myFunc(e)">
</app-item-list>
</ng-container>

answered Apr 4, 2019 at 11:55

Syam Prasad

1591 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to extract angular component output to an outer div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related