Angular - trying to use child component function in parent view but I'm gettting an error-CodePudding

When I use @ViewChild I get the error that the component is not defined. When I use @ViewChildren I get the error that the function from that component is not a function.

I am new to using child components in Angular so I'm not sure why it's doing this when I do have the child component defined in the parent component and when it's clearly a function in the child component.

I don't want to have to define every function from the child in the parent or else what's even the point of using a separate component.

Child Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mood',
  templateUrl: './mood.component.html',
  styleUrls: ['./mood.component.css']
})
export class MoodComponent implements OnInit {

  moodColors = ['red', 'orange', 'grey', 'yellow', 'green'];

  constructor() { }

  ngOnInit(): void {
  }

  chooseMood() {
    alert(this.moodColors);
  }

}

Parent Component (Relavant Part of Version with "ERROR TypeError: ctx_r3.mood is undefined")

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { MoodComponent } from '../mood/mood.component';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CalendarComponent implements OnInit {

  @ViewChild('mood') mood: MoodComponent = new MoodComponent;

Parent Component (Relavant Part of Version with "ERROR TypeError: ctx_r3.mood.chooseMood is not a function")

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { MoodComponent } from '../mood/mood.component';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CalendarComponent implements OnInit {

  @ViewChildren('mood') mood: MoodComponent = new MoodComponent;

Parent View

<h2 (click)="mood.chooseMood()"></h2>

CodePudding user response：

1 - you have to use this code

@ViewChild('mood') mood : MoodComponent;

when you are using @ViewChildren it will return list of items with the 'mood' name then you have to use this code

mood.first.chooseMood() ;

its better use ViewChildren when there is ngIf in your element

2- no need new keyword for initialize mood variable it would be fill after ngOnInit life cycle fires

CodePudding user response：

You don't explicitly initialize view children via new.

Just use:

@ViewChild('mood') mood : MoodComponent;

If that doesn't work post a Stackblitz example which I can edit to resolve the issue.

Also, using ViewChild is more of an exception in Angular, and your use of it points to a probable design issue. More likely you child component should emit via an Output to the parent.