CODEWITHSUNDEEP
angularcomponentsangular-components
Jose Cabrera
Jose Cabrera

Reputation: 13

Render Component On To another Component Angular 5

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[];
}

Upvotes: 0

Views: 7246

Answers (2)

Ilia Volk
Ilia Volk

Reputation: 556

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

  1. Content projection. Search for <ng-content>. (most simple but has huge limitations)
  2. Pass template as parameter. Search for @ContentChildren, TemplateRef, ViewContainerRef, structural directives. (flexible)
  3. 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.

Upvotes: 1

Lars
Lars

Reputation: 788

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.

Upvotes: 0

Related Questions