Detailed explanation of angular parent-child component communication

Detailed explanation of angular parent-child component communication

APIs used

Input - defines acceptable properties in the child component, which can be used by the parent component to pass data to the child component

Output - The output property of the child component. This property needs to be of EventEmitter event type to notify the parent component to take corresponding actions.

EventEmitter - used in components with @Output directive to emit custom events synchronously or asynchronously and register handlers for these events by subscribing to instances.

Simple Example

Render subcomponents in a list, click on a subcomponent to notify the parent component to perform an operation

person.ts

export interface Person {
  name: string;
  age: number;
  sex: string;
}

Parent Component

import { Component, OnInit } from '@angular/core';
import { Person } from './person';
@Component({
  selector: 'app-comp-parent',
  template: `
    <app-comp-child
      *ngFor="let person of personList"
      (itemClick)="onItemClick($event)"
      [data]="person"
    ></app-comp-child>
  `,
})
export class CompParentComponent implements OnInit {
  personList: Person[] = [
    { name: '张三', age: 21, sex: '男' },
    { name: 'Li Si', age: 25, sex: 'Male' },
    { name: '李莉', age: 20, sex: '女' },
  ];
  constructor(){ }
  ngOnInit(): void { }
  onItemClick(item: Person){
    console.log('click-person: ', item);
  }
}

Subcomponents

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Person } from './person';
@Component({
  selector: 'app-comp-child',
  template: `
    <div (click)="itemClick.emit(data)">
      Name: {{ data.name }}
      Age: {{ data.age }}
      Sex: {{ data.sex }}
    </div>
  `,
})
export class CompChildComponent implements OnInit {
  @Input() data!: Person;
  @Output() itemClick = new EventEmitter();
  constructor(){ }
  ngOnInit(): void { }
}

Effect

Rendering

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Example of Angular2 parent-child component communication
  • Implementation of shared service communication between Angular 2 parent and child components
  • Angular2 parent-child component data communication example

<<:  Pure CSS code to achieve drag effect

>>:  A detailed introduction to Linux memory management and addressing

Recommend

JS function call, apply and bind super detailed method

Table of contents JS function call, apply and bin...

Detailed explanation of SQL injection - security (Part 2)

If there are any errors in this article or you ha...

mysql 5.7.19 latest binary installation

First download the zip archive version from the o...

js realizes a gradually increasing digital animation

Table of contents background Achieve a similar ef...

Let's deeply understand the event object in js

We know that the commonly used events in JS are: ...

uniapp dynamic modification of element node style detailed explanation

Table of contents 1. Modify by binding the style ...

InnoDB type MySql restore table structure and data

Prerequisite: Save the .frm and .ibd files that n...

Node+Express test server performance

Table of contents 1 Test Environment 1.1 Server H...

MySQL latest version 8.0.17 decompression version installation tutorial

Personally, I think the decompressed version is e...

Share 13 basic syntax of Typescript

Table of contents 1. What is Ts 2. Basic Grammar ...

Solution to the garbled problem of web pages when the encoding is set to utf-8

Recently, when I was writing web pages with PHP, I...

MySQL Interview Questions: How to Set Up Hash Indexes

In addition to B-Tree indexes, MySQL also provide...

Deleting files with spaces in Linux (not directories)

In our daily work, we often come into contact wit...

Vue imitates ElementUI's form example code

Implementation requirements The form imitating El...