Creé un paquete npm privado que puedo ejecutar en mis otras aplicaciones usando este código en el html:
<app-header-name></app-header-name>Este es el código en el paquete npm que ejecuta:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-header-name', templateUrl: './header.component.html', styleUrls: ['./header.component.css'], }) export class HeaderComponent implements OnInit { public blob: any; constructor() {} ngOnInit(): void { console.log(this.blob); } }Y este es el código html en el paquete npm:
<div class="row"> <div class="col d-flex justify-content-center"> Click the button to download the template </div> </div>Mi pregunta es, ¿cómo paso una variable de mi aplicación para ingresar a la variable blob en el paquete npm? He intentado lo siguiente, que solo la consola registró 'indefinido':
<app-header-name blob="bazinga"></app-header-name>Además, ¿hay alguna forma de devolver los datos del paquete npm? Por ejemplo, tomará la variable de blob de cadena, luego le agregará otra palabra y la devolverá a la aplicación principal.
necesita agregar una entrada en su componente.
import { Component, EventEmitter, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-header-name', templateUrl: './header.component.html', styleUrls: ['./header.component.css'], }) export class HeaderComponent implements OnInit { @Input() blob: any; @Output() somethingOut = new EventEmitter(); ngOnInit(): void { console.log(this.blob); } sendToParent() { this.somethingOut.emit({ data: 'Hello from child component '}); } }pasando en una cadena
<app-header-name blob="bazinga"></app-header-name>pasando una variable del padre
<app-header-name [blob]="someVarOnTheParent"></app-header-name> al pasar variables, el componente principal necesitará una función para recibir los datos. Observe que se necesita $event ya que el niño está pasando datos
<app-header-name [blob]="someVarOnTheParent" (somethingOut)="parentFunc($event)"></app-header-name>