ionic3 customized component

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 ;