Sharing @input between angular components

1
votes

It is possible to share data between 2 angular components while one of them is used inside the other component? I am using the following code to define the templates for the components and i would like to specify the "Source" property only once.

Is it possible to inherit the import from a parent component? As i will only ever use the "ui-grid-header" inside the "ui-grid"

For this project i am Angular version 5.2

And since i am fairly new to Angular development. Is there a place where i would be able to find information like this?

Template

<ui-grid [source]="gridDatasource">
  <ng-template #headerTemplate let-data>
    <th>
        <ui-grid-header [source]="datasource" [sortColumn]="'Name'">
            Name
        </ui-grid-header>
    </th>
    <!-- Omitted rest of the code for example -->
  </ng-template>
</ui-grid>

ui-grid-component

@Component({
    selector: 'ui-grid',
    templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit, AfterContentInit{
    @ContentChild('headerTemplate')
    headerTemplate: TemplateRef<any>;

    @Input("source")
    public datasource: AbstractGridDataSource;

    /* Omitted rest of the code for example */
}

ui-grid-header-component

@Component({
    selector: 'ui-grid-header',
    template:
`
<ng-container *ngIf="datasource">
    <a [ngClass]={disabled:!sortColumn} (click)="sortColumn && datasource.setOrderColumn(sortColumn)" href="javascript:void(0)">
        <ng-content></ng-content>
    </a>
</ng-container>
`
})
export class GridHeaderComponent {
    @Input("source")
    public datasource: AbstractGridDataSource;

    @Input("sortColumn")
    public sortColumn: string;
}
2
angular
you should see this - Novy
Yes, it's possible. But i recommend you to supply more information while asking angular questions. For example grid.component.html is important for your question. It's best to prepare a stackblitz fork on stackblitz.com/fork/angular with minimal reproduction. So community will be able to give you the meaningful answers much more easily. - Halil İbrahim Karaalp
And also reviewing code at github.com/swimlane/ngx-datatable/tree/master/src/components would be helpful. - Halil İbrahim Karaalp

2 Answers

1
votes

Usually this is solved using shared service:

@Component({
    selector: 'ui-grid',
    templateUrl: './grid.component.html',
    providers: [SharedService]
})
constructor GridComponent(private service:SharedService)
//save input i.e. sharedService.set(input)
//------------------------------------------------
constructor GridHeaderComponent(private service:SharedService)
//get input i.e. sharedService.get()
1
votes

What you can do is propagate the source from your ui-grid-header component into all ui-grid-header sub-components, like so:

In your GridComponent get a hold of of the child components:

@ContentChildren(GridHeaderComponent) headers: QueryList<GridHeaderComponent>;

For a simple one-time binding, simply use ngAfterContentInit to pass the value:

ngAfterContentInit() {
  this.headers.forEach(header => header.source = this.source);
}

If you need to handle many-times-binding, you'll need to use ngOnChanges to detect whenever source changes and propagate that down there.