Angular 2 component - multiple occurrences with the same selector

Question

I am given a component class with the following definition:

@component({
    selector: 'app-table',
    template: '<div #content></div>',
    styleUrls: ['./table.component.css']
});

export class TableComponent implements OnInit{
    @ViewChild('content') elm: ElementRef;
    ....
}

However, in the parent html, the structure is:

<div label="summary1">
   <app-table type="thisMonth"></app-table>
</div>
<div label="summary2">
   <app-table type="lastMonth"></app-table>
</div>

My question is, how can I put generate different content and put into the corresponding 'app-table'?

I tried to use the following method and it returns undefined:

export class TableComponent implements OnInit{
    @ViewChildren('content') elms: <QueryList>ElementRef;

Thank you!

Use @Input() decorator to receive data from parent component i.e. "type" in your case. — Akshay Rana
– Akshay Rana, Commented Jul 18, 2018 at 3:48
@AkshayRana Thank you for the reply. So what I need to do is to declare: @Input() type: string; in the parent component, and new 2 TableaComponent objects in the parent component to generate corresponding content, is that correct? — James.C
– James.C, Commented Jul 18, 2018 at 4:48
No, you have to declare @Input() type: string; in the child component i.e. TableComponent, that means it is expecting an input named "type", now wherever you want to render this component you can send the type dynamically, like you are already doing here : <app-table type="thisMonth"></app-table>. So, in this case, you,ll get "thisMonth" as the value of type in Table component that is rendered for the above tag. After that you can build your logic in the Table component. — Akshay Rana
– Akshay Rana, Commented Jul 18, 2018 at 5:20

Abhishek Sharma · Accepted Answer · 2018-07-18 05:38:24Z

0

As @Akshay Rana has mentioned in his comments that you have to use @Input decorator for passing data, he is absolutely correct. I am extending his answer in more detail. As you have asked that you need to generate different content and put into the corresponding 'app-table', if in case content is a HTML then only @Input decorator will not work. So I am sharing an URL where you can find all your answers,including the use of @Input,@Output decorator and all, please have a look and let me know if you need further more clarifications. How to get inner html of Angular6 component and add it to component template?

edited Jul 18, 2018 at 5:38

answered Jul 18, 2018 at 4:41

Abhishek Sharma

3601 silver badge10 bronze badges

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

1 Comment

James.C Over a year ago

Thank you very much! I will refer to your URL and try again!

Collectives™ on Stack Overflow

Angular 2 component - multiple occurrences with the same selector

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related