How to call components function that was added using transclusion?

Question

Angular 2 newbie here, I am trying to make master form that handles basic activities like resetting, save functionalities. The Master Form uses ng-content to load its content area.

On click of save button I want Master Form to call child components save() function before it executes its own set of instructions.

How would I do that?

I think this question is somewhat similar to what I want but the solution given there is not working Angular 2 call function of component that was inserted with transclusion (ng-content)

Below is my code, requesting you to help

form.component.ts

import { Component, Input, Output, ContentChild } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent{
  @Input() headerTitle:string = "Header Title";
  @Input() saveBtnText: string = "Save";
  @Input() resetBtnText: string = "Reset";
  @Input() addBtnText: string = "Add";
  @ContentChild('transcludedContent') contentChild;

  saveForm(){
    console.log("Parent Form save");
    console.log(this.contentChild.saveForm1());
  }
}

test1.component.html

    <app-form headerTitle="my header" #transcludedContent>
        <div form-body>
            <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
            </p>
        </div>
    </app-form>

test1.component.ts

import { Component, OnInit } from '@angular/core';
import { FormComponent } from '../form/form.component';

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component extends FormComponent {
  saveForm1(){
    console.log("Child Form save");
  }
}

I am unable to get reference of test1.component in form.component so that I can call its save() function. What would be the right way to achieve this ?

Edit 1:

Also adding form.component.html for future references

<div class="panel panel-default fcs-form">
  <div class="panel-header form-header">
        {{headerTitle}}
  </div>

  <div class="panel-body form-body">
    <ng-content select="[form-body]"></ng-content>
  </div>
  <div class="panel-footer text-center form-footer">
        <button class="btn btn-primary">{{resetBtnText}}</button>
        <button class="btn btn-primary">{{saveBtnText}}</button>
        <button class="btn btn-primary">{{addBtnText}}</button>
  </div>
</div>

Another option is to use an rxjs subject (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md) and publish messages that you would like to save. Each child can subscribe to that subject and react appropriately. — Jaime Torres, Apr 04 '17 at 13:15
@GünterZöchbauer I have made a mistake the `form.component.ts`, the console log should have been `console.log(this.contentChild.saveForm1);` — Flying Gambit, Apr 04 '17 at 13:23
@GünterZöchbauer it should be showing the function in test1.component which has a console.log that says "child Form save" — Flying Gambit, Apr 04 '17 at 13:35
For that you would need `this.contentChild.saveForm1()` instead of `console.log(this.contentChild.saveForm1)` - so gain, what did your console.log print? — Günter Zöchbauer, Apr 04 '17 at 13:36
@GünterZöchbauer `this.contentChild.saveForm1` gives `undefined` — Flying Gambit, Apr 04 '17 at 13:39
That is because `this.contentChild` is returning a reference to `form.component` instead of `test1.component` — Flying Gambit, Apr 04 '17 at 13:41
Yes, but I still can't make sense of your code. `#transcludedContent` is on `` and `@ContentChild('transcludedContent') contentChild;` is also in ``. To me it looks like you want to access the component from within itself. — Günter Zöchbauer, Apr 04 '17 at 13:49
@GünterZöchbauer I might be wrong with the placing of `#transcludedContent`, It was giving `undefined` when I used it on `div` and `p`. So I kept it in `app-form`. As I said earlier , I am pretty new to this and doing stuffs from reading articles and looking at SO answers. The SO answer that I have linked in my question uses the same technique. It is from there that I have picked this up — Flying Gambit, Apr 04 '17 at 13:54
@GünterZöchbauer If it makes simple, the main goal is just to have child's save function execute first before executing parent's save function. — Flying Gambit, Apr 04 '17 at 13:56
I don't see how this answers my question. Why are you trying to access the component from within itself using `@ContentChild()`? — Günter Zöchbauer, Apr 04 '17 at 13:58
As the name says `@ContentChild()` is about children, but `` is the parent of ``. — Günter Zöchbauer, Apr 04 '17 at 14:04
I thought since the line `` is in test1.component, it would return test1 — Flying Gambit, Apr 04 '17 at 14:06
@FlyingGambit RxJs included in Angular to support http. NgRx is a "wrapper" around that that makes it even easier, but RxJs is reactive extension. — Jaime Torres, Apr 04 '17 at 17:40

Günter Zöchbauer · Accepted Answer · 2017-04-04T14:13:11.697

2

I think this is what you want - communicating from child to parent using an output event:

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent{
  @Input() headerTitle:string = "Header Title";
  @Input() saveBtnText: string = "Save";
  @Input() resetBtnText: string = "Reset";
  @Input() addBtnText: string = "Add";
  @Output() save:EventEmitter = new EventEmitter();

  saveForm(){
    console.log("Parent Form save");
    this.save.emit(null);
  }
}

<app-form headerTitle="my header" (save)="saveForm()">
    <div form-body>
        <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
        </p>
    </div>
</app-form>

edited Apr 04 '17 at 14:13

answered Apr 04 '17 at 14:06

Günter Zöchbauer

623,577
216
2,003
1,567

Will that log "Child Form save" and then "Parent Form save" ? – Flying Gambit Apr 04 '17 at 14:09
That's the idea. Actually no. Because `console.log(Parent Form save)` is in the child component, therefore it will be the other way around. – Günter Zöchbauer Apr 04 '17 at 14:10
I don't understand, would it not return `undefined` for `this.contentChild.saveForm1()` – Flying Gambit Apr 04 '17 at 14:11
Right, sorry, forgot to remove this line – Günter Zöchbauer Apr 04 '17 at 14:13
If I am right, the child form will also have a function `saveForm(){ console.log("Child Form save"); }`. I will try it out – Flying Gambit Apr 04 '17 at 14:15
Do you mean the parent component with `console.log("Child Form save");` or the child component with `console.log("Parent Form save");`? ;-) – Günter Zöchbauer Apr 04 '17 at 14:16
Neither, `Child form with console.log("Child Form save");` – Flying Gambit Apr 04 '17 at 14:18
I couldn't find such a child component. I guess we won't make any progress as long as we can't agree what is child and what is parent. Your code says `` is in `test1.component.html` which makes `FormComponent` a child of `Test1Component` – Günter Zöchbauer Apr 04 '17 at 14:19
Oh I was looking at FormComponent as parent and test1Component as child. In the sense that FormComponent is encapsulating test1Component – Flying Gambit Apr 04 '17 at 14:22
No, `FormComponent` is part of `Test1Component` and therefore a child. You just need to look at the generated DOM. It will be `` – Günter Zöchbauer Apr 04 '17 at 14:24
I understand now, I did not realize that we were talking about different things. I am trying to execute test1Component.save() execute first then Form.Component.save() execute – Flying Gambit Apr 04 '17 at 14:26
Then move `@ContentChild()` to `test1Component` – Günter Zöchbauer Apr 04 '17 at 14:27
Then that will fetch me a reference to FormComponent in test1Component.ts. Then emit save event from test1Component and capture it in the FormComponent.ts . Am I right ? – Flying Gambit Apr 04 '17 at 14:31
I guess I would need to know where the save button is to give a full answer. If you use `@ContentChild()` you shouldn't need `@Output()`, only move `@ContentChild()` from child to parent. – Günter Zöchbauer Apr 04 '17 at 14:32
header title, reset, save button etc is in the FormComponent, all form fields are in test1Component – Flying Gambit Apr 04 '17 at 14:33
@FlyingGambit, why don't you create a plunker with the structure of the components you want. It's really hard to know what you are actually after here :) – Fredrik Lundin Apr 04 '17 at 14:36
My answer above should do what you want, just switch the two lines inside `saveForm()`. `EventEmitter` is sync by default. – Günter Zöchbauer Apr 04 '17 at 14:38
I tried but I cant get the plunkr to work , giving errors on unhandled promise. https://plnkr.co/edit/JYkPF2er8IHMrYZ8dl0w?p=preview – Flying Gambit Apr 04 '17 at 15:19
I will try doing it in my machine as per your answer – Flying Gambit Apr 04 '17 at 15:20
I used this approach and it works flawlessly, is there any caution I should take so that it does not trigger other saveForm functions ? – Flying Gambit Apr 05 '17 at 05:45
1

I really appreciate your patience, time and effort you have put into this. Thank you – Flying Gambit Apr 05 '17 at 05:46
You mean the one in my answer? No, events from `@Output()` don't bubble, only binding like `(save)="saveForm()"` on the component that emits it reacts to this event. – Günter Zöchbauer Apr 05 '17 at 05:47
Definitely, that's one of the basic building blocks of Angular ;-) https://angular.io/docs/ts/latest/tutorial/ has nice docs to get started. – Günter Zöchbauer Apr 05 '17 at 05:53

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

If you want to keep the ContentChild approach, then this should work. But I recommend using an @Input and @Output approach, like Günter Zöchbauers answer.

@ContentChild('transcludedContent') contentChild: any;

saveForm(){
  if(typeof this.child.save === 'function') { //make sure that the save method exists
    this.child.save();
  }
}

I also updated the plunker for you, to demonstrate the concept https://plnkr.co/edit/0T0BBEJm73NWxUtW9Oje?p=preview

edited May 23 '17 at 12:17

Community

1
1

answered Apr 04 '17 at 13:12

Fredrik Lundin

8,006
1
29
35

No, I don't think I can use it like that because, I don't know which component will get transcluded – Flying Gambit Apr 04 '17 at 13:34
It would have been nice if I could access the child without knowing its name – Flying Gambit Apr 04 '17 at 13:44
@FlyingGambit, updated the answer and plunker to use generic components if you want to go the `ContentChild` road. I recommend Günter Zöchbauers approach though – Fredrik Lundin Apr 04 '17 at 14:24
Thanks Fredrik, I appreciate your help and as suggested I will go with Günter Zöchbauers approach – Flying Gambit Apr 04 '17 at 14:32

How to call components function that was added using transclusion?

2 Answers2