CODEWITHSUNDEEP
angular
Sandeep Thomas
Sandeep Thomas

Reputation: 4759

Reading a child component data from parent component in Angular 4

Ive a parent page to list items in a grid and on its edit/new event I have to show a model with a grid in the model. The grid itself is another component.

Other than the grid there are two text boxes on the model which is part of the parent component which is holding the child component (Grid). Following a screen grab in which red marked one is the child component.

enter image description here

Here is the child component selector declaration

@Component({
    selector: 'app-userlist',
    templateUrl: 'userlist.component.html'
})

On the model, when we submit this event fires

onSubmit(): void {

    this.http.post(this.baseUrl + "api/TemplateCategory", this.templatecategory).subscribe(result => {
        //todo did it save properly or return an error?

        $("#newTemplateCategoryModal").modal("hide");
        this.templatecategorySaved.emit(this.templatecategory);
    }, error => {
        alert("post error\nStatus Code: " + error.status + "\nMessage:" + error._body);
    });
}

So my question is how can we get the grid (child component) values when we saving. In the grid there is a dropdown for selecting roles for each user.

Upvotes: 0

Views: 1900

Answers (2)

Nandolcs
Nandolcs

Reputation: 401

I do not think this would be possible because as stated in the Angular Docs:

The local variable approach is simple and easy. But it is limited because the parent-child wiring must be done entirely within the parent template. The parent component itself has no access to the child.

What I use to to is use a service to deal with this kind of interaction. You can create a service in the parent level to send and receive data to/from child components or create it at the child level if it makes more sense.

I could provide you a couple of examples but Angular docs always has great examples in my opinion. Follow this link for interaction via service.

Upvotes: 0

CharybdeBE
CharybdeBE

Reputation: 1843

On the parent component you can have a ViewChild directive like

@ViewChild('identifier') child: ChildType;

on the template you add an identifier to your child 

   <app-userlist #identifier></app-userlist>

And then you can call you child method in your functions or use its own variable by doing child.whatever

Upvotes: 2

Related Questions