Sharing @input between angular components

Question

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

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
– Halil İbrahim Karaalp, Commented Mar 22, 2018 at 8:08
And also reviewing code at github.com/swimlane/ngx-datatable/tree/master/src/components would be helpful. — Halil İbrahim Karaalp
– Halil İbrahim Karaalp, Commented Mar 22, 2018 at 8:12

kemsky · Accepted Answer · 2018-03-22 08:13:38Z

1

+100

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()

answered Mar 22, 2018 at 8:13

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

Comments

Ovidiu Dolha · Accepted Answer · 2018-03-15 14:03:54Z

1

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.

answered Mar 15, 2018 at 14:03

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

2 Comments

Tom Over a year ago

Thank you for your comment. I have implemented the code are provided by you but in the ngAfterContentInit function by this.headers is an empty array.

Llorenç Pujol Ferriol Over a year ago

This will not work, as he projected the GridHeaderComponent as a templateRef, removing the ng-template wrapping the grid header component may solve the issue!

Collectives™ on Stack Overflow

Sharing @input between angular components

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related