test-buttonComponent.ts
import { Component, Input, Output, EventEmmitter } from '@angular/core';
export class ComponentName {
@Input() param01: any; // if you want to pass a value from the parent node to the child node, you should pass it through this @Input
@Input() func01: IFunc01;
@Output() event = new EventEmmitter(); // if you want to pass a value from the child node to the parent node, you should pass it through this @Output
constructor() {
}
passUpward (ev: any) {
this.event.emit(ev.target.value);
}
}
test-buttonComponent.html
--------------------------------------- Split Line ---------------------------------------
/* Update on 11th Sept */
What should we do to bind the variables in father-component(page) to the child-compponent as params to prop in when the customized component has already declared the input params and output events? I'll show you another new example below to explain.
- html file of the child component
- ts file of the child component
- html file of the father page
- ts file of the father page
---------------------------------------------------------------------------------------------------------------------------------------------------------
Read(Write) till here, we can see differences and similars between Angular and Vue when it comes to customized components :
- differences :
- Angular : more obvious to read the code about input params and output result(/events) ;
- Vue : everything is a component, so you can directly use v-bind to bind input params and v-on to listen to the output events ;
- similars :
- when output events from the child component, the way of listening to is similar to each other ;