0

Estoy en Angular y necesito invocar a un método de un componente desde otro.

Teniendo este componente:

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

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

  constructor() {}
  @Input() texto:string;


  toggleWithGreeting(popover, texto: string) {
    if (popover.isOpen()) {
      popover.close();
    } else {
      popover.open({texto});
    }
  }

  ngOnInit(): void {}

}

Necesito alcanzar el método toggleWithGreeting desde el componente padre, tengo esto:

send(){
    this.renderer.selectRootElement(this.popName.nativeElement).toggleWithGreeting("","");
}

Pero no funciona, no soy capaz de acceder al método, el html por si puede ayudar es este:

 <app-popover #popName [texto]="'Esto va a ser el mensaje de error'" ></app-popover>

1 respuesta 1

1

Para acceder desde el padre al hijo a todos sus componentes necesitas usar @ViewChield()...

Componente padre app-padre

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

@Component({
selector: 'app-padre',
templateUrl: './padre.component.html',
styleUrls: ['./padre.component.scss']
})
export class padreComponent implements OnInit {
 @ViewChield(PopoverComponent, {static:true}) popoverComponent: PopoverComponent;

 constructor() {}
 ngOnInit(): void {}
 send(){
  this.popoverComponent.toggleWithGreeting("" , "");
 }
}

Componente hijo app-popover

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

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

constructor() {}
@Input() texto:string;


toggleWithGreeting(popover, texto: string) {
 if (popover.isOpen()) {
  popover.close();
 } else {
  popover.open({texto});
 }
}

ngOnInit(): void {}

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.