Render Component On To another Component Angular 5

Question

I have a component that I created and its called options because it renders edit and delete button. Then I have a table component that is reusable. I inject the table component into a view on the site. Then I import the options component but I don't display it on that view because I want to pass it to the table component and render it to tag. Is there away to pass the options component from main component to the table component with injecting it because not not tables with have the same options component.

options.component.ts

@Component({
    selector: 'options',
    template: `
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="radio" name="options" id="option" autocomplete="off" checked>Edit
            </label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option" autocomplete="off" checked>Delete
            </label>
         </div>`,
    styles: []
})

export class OptionsComponent implements OnInit {
     constructor() { }

     ngOnInit() { }
}

main.component.ts

import { TableComponent } 'file location here';
import { OptionsComponent } 'file location here'; // Component is injected here and I want to pass it to <app-table></app-table>
@Component({
    selector: 'app-main',
    template:'<app-table [tableData]="LocationsList"></app-table>'
})

export MainComponent implements OnInit {
    LocationsList: []; // list of locations

}

table.row.component.ts

@Component({
    selector: 'app-table',
    template: `
       <ul>
          <li *ngFor="let property of tableData">{{ property }}</li>
       </ul>`,
})

export class TableComponent implements OnInit {
     @Input() tableData: any[];
}

Please add some code which better illustrates your current structure. — Zze
– Zze, Commented Mar 5, 2018 at 21:28

Ilia Volk · Accepted Answer · 2018-03-05 22:57:33Z

If you want to pass HTML as parameter to component, there are a lot of ways, with benefits and limitations. Mostly different:

Content projection. Search for <ng-content>. (most simple but has huge limitations)
Pass template as parameter. Search for @ContentChildren, TemplateRef, ViewContainerRef, structural directives. (flexible)
Pass component's type as @Input and render it inside another (using ViewContainerRef.createComponent, [ngComponentOutlet], etc.). (looks dirty)

They require a bit helping code. There can be some 'perversions' with them. Сhoice depends on many reasons.

Lars · Accepted Answer · 2018-03-05 21:47:25Z

If you want to inject information into a childComponent, use @input like this.

ChildComponent.ts:

@Input() inputVariableName: InputObjectType;

ParentComponent.html:

<app-child-selector [inputVariableName]="parentComponentVariableName">
</app-child-selector>

If you want to pass information from child component to parent component, it's a bit more complex, but i'd recommend using observer pattern, with a service and an eventemitter. Hope that helps.

Collectives™ on Stack Overflow

Render Component On To another Component Angular 5

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related