Angular 8, trouble calling function from another component

Question

Trying to call a create-tag modal from a different Component.

The component I am working in is called pets and is located in: app/main/ClientPatientManagement/Pets

Trying to access the show() method in: app/main/tags/tags/create-or-edit-tag-modal.component'

Here is the code in my Pets.Component:

    import { CreateOrEditTagModalComponent } from '@app/main/tags/tags/create-or-edit-tag-modal.component';
@Component({
    templateUrl: './pets.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})
export class PetsComponent extends AppComponentBase {

    @ViewChild('createOrEditTagModal', { static: true }) createOrEditTagModal: CreateOrEditTagModalComponent;

Here are some other code including ngOnInit etc. but I want to call the below function when a button is pressed:

createTag(): void {
        this.createOrEditTagModal.show();
    }

My problem is that I keep getting an error saying my this.createOrEditTagModal is undefined.

I have also imported this component in my main.module.ts and added it to my declarations there.

Can anyone help me as to why this keeps being undefined?

EDIT: For completeness, I added some code from create-or-edit-tag-modal-component

@Component({
    selector: 'createOrEditTagModal',
    templateUrl: './create-or-edit-tag-modal.component.html'
})
export class CreateOrEditTagModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    constructor(
        injector: Injector,
        private _tagsServiceProxy: TagsServiceProxy
    ) {
        super(injector);
    }


    show():void{
        console.info("Called tag component successfully!"); //for testing
    }

Is there a class in create-or-edit-tag-modal? Have you tried add @Injectable? — Tsakiroglou Fotis, Feb 03 '20 at 13:58
Hi Tsakiroglou, there is a class in create-or-edit-tag-modal, I updated my question to include an extract from it. Can you spot any problems there? — Gerrit de Swardt, Feb 04 '20 at 08:12
Oh I see, thanks, I am afraid I don't see anything. I'll delve more. — Tsakiroglou Fotis, Feb 04 '20 at 08:45

score 2 · Answer 1 · answered Feb 04 '20 at 09:33

Good news, found the problem!

the problem was in my pets.component.html. I forgot to declare my modal there, so I added this in pets.component.html:

<createOrEditTagModal #createOrEditTagModal (modalSave)="getPets()"></createOrEditTagModal>

This manage to fix the issue, running now smoothly and error free. Note that the getPets() function gets called after the modal's own save function, so it just basically refreshes the page.

score 1 · Answer 2 · answered Feb 03 '20 at 14:58

1

I think this first parameter is wrong in your code.

@ViewChild('createOrEditTagModal', { static: true }) createOrEditTagModal: CreateOrEditTagModalComponent;

Should be changed as

@ViewChild(CreateOrEditTagModalComponent, { static: true }) createOrEditTagModal: CreateOrEditTagModalComponent;

Also, make sure pets.component.html has CreateOrEditTagModalComponent in it.

answered Feb 03 '20 at 14:58

Dinindu Kanchana

323
2
8

Good day Dinindu. Thanks for your input. I have tried this out, but it doesn't seem to have any impact. Spits out the exact same error. – Gerrit de Swardt Feb 04 '20 at 08:03
1

Hi Gerrit. I saw you have solved the issue, I also have mentioned it in my answer.->>>>"Also, make sure pets.component.html has CreateOrEditTagModalComponent in it." – Dinindu Kanchana Feb 04 '20 at 13:02
Thanks Dinindu, I marked your answer as useful, it might solve the problem for other people – Gerrit de Swardt Feb 05 '20 at 07:27

Tsakiroglou Fotis · Answer 3 · 2020-02-04T09:29:03.077

0

Can you please try to give a Directive decorator like this :

@Directive({selector: 'createOrEditTagModal'})
export class CreateOrEditTagModalComponent extends AppComponentBase {

edited Feb 04 '20 at 09:29

answered Feb 04 '20 at 09:08

Tsakiroglou Fotis

953
8
24

Angular 8, trouble calling function from another component

3 Answers3