Cómo pasar datos de un componente a otro en Angular

Cómo pasar datos de un componente a otro en Angular

En este tutorial, vamos a aprender sobre la comunicación de componentes en angular usando ejemplos.

Índice
  1. @Agarrar
  2. Pasar datos desde un componente principal
  3. Pasar valores dinámicos
  4. Escuche eventos de componentes padre-hijo

@Agarrar

Angular nos proporciona @Input decorador usando esto podemos pasar datos del componente principal al componente secundario.

Veamos un ejemplo

child.component.ts

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


@Component({
  selector: 'app-child',
  templateUrl: './childcomponent.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() name: string;
}

En el código anterior, primero importamos un Input decorador de la @angular/core paquete y lo agregó al frente name propiedad para que pueda estar disponible para pasar datos desde el componente principal.

niño.componente.html

<div>
   <h1>{{name}}</h1></div>

Pasar datos desde un componente principal

Es hora de pasar los datos del componente principal.

aplicación.componente.html

<div>
   <h1>Welcome to angular world</h1>
   <app-child name="Gowtham"></app-child></div>

En el código anterior, pasamos datos a un componente secundario usando una propiedad name = "gowtham".

Pasar valores dinámicos

También podemos pasar valores dinámicos a un componente hijo envolviendo la propiedad con [ ]
manos.

aplicación.componente.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  myname = 'Gowtham';}

aplicación.componente.html

<div>
   <h1>Welcome to angular world</h1>
   <app-child [name]="myname"></app-child></div>



pasando-valores-angulares-dinámicos

Escuche eventos de componentes padre-hijo

En nuestro caso, si queremos cambiar name, necesitamos emitir un evento personalizado desde nuestro componente secundario. El componente principal reacciona a este evento personalizado.

Dentro de nuestro componente secundario, primero importamos un Output decorador y EventEmitter del @angular/core envoltura.

child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './childcomponent.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() name: string;
  @Output() changeName = new EventEmitter();
  updateName() {
        this.changeName.emit();  }
}

niño.componente.html

<div>
  <h1>{{name}}</h1>
  <button (click)="updateName()">Change Name</button></div>

Aquí emitimos un evento personalizado llamado changeNamecada vez que alguien hace clic en un button.

En nuestro componente de aplicación, escuchamos el changeName evento e invoca el onchangeName método.

aplicación.componente.html

<div>
    <h1>Welcome to angular world</h1>
    <app-child [name]="myname" (changeName)="onchangeName()"></app-child></div>

aplicación.componente.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  myname = 'Gowtham';

  onchangeName() {    this.myname = 'Angular';  }}

Si quieres conocer otros artículos parecidos a Cómo pasar datos de un componente a otro en Angular puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas