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

More elegant processing of dates in JavaScript based on Day.js

Table of contents Why use day.js Moment.js Day.js...

A simple example of creating a thin line table in html

Regarding how to create this thin-line table, a s...

Detailed explanation of the difference between var, let and const in JavaScript

Table of contents As a global variable Variable H...

A brief introduction to Tomcat's overall structure

Tomcat is widely known as a web container. It has...

Implementation of multi-environment configuration (.env) of vue project

Table of contents What is multi-environment confi...

vue cli3 implements the steps of packaging by environment

The vue project built with cli3 is known as a zer...

How to reset your Linux password if lost

1. The startup menu is to move the cursor to the ...

Solution to Element-ui upload file upload restriction

question Adding the type of uploaded file in acce...

Implementation example of nginx access control

About Nginx, a high-performance, lightweight web ...

How to install Solr 8.6.2 in Docker and configure the Chinese word segmenter

1. Environment version Docker version 19.03.12 ce...

HTML simple web form creation example introduction

<input> is used to collect user information ...