Return to site

ANGULAR TIP: Output Decorator

· fullstack

1️⃣ Definition

@Output decorator is used to pass the data from child to parent component.

@Output decorator binds a property of a component, to send data from one component to the calling component.

@Output binds a property of the type of angular EventEmitter class.

 

 

2️⃣ Snippet

👉 Child component controller, 𝘸𝘩𝘦𝘳𝘦 𝘸𝘦 𝘴𝘦𝘯𝘥 𝘵𝘩𝘦 𝘦𝘷𝘦𝘯𝘵 𝘤𝘢𝘶𝘴𝘪𝘯𝘨 𝘵𝘩𝘦 𝘤𝘩𝘢𝘯𝘨𝘦

 

👉 Child component template, 𝘸𝘩𝘦𝘳𝘦 𝘵𝘩𝘦 𝘎𝘜𝘐 𝘵𝘳𝘪𝘨𝘨𝘦𝘳𝘴 𝘵𝘩𝘦 𝘤𝘩𝘢𝘯𝘨𝘦

 

👉 Parent component template, 𝘸𝘩𝘦𝘳𝘦 𝘸𝘦 𝘱𝘶𝘵 𝘵𝘩𝘦 𝘤𝘩𝘪𝘭𝘥 𝘤𝘰𝘮𝘱𝘰𝘯𝘦𝘯𝘵 𝘵𝘢𝘨 𝘣𝘰𝘶𝘯𝘥 𝘵𝘰 𝘵𝘩𝘦 𝘱𝘢𝘳𝘦𝘯𝘵

 

 

👉 Parent component controller, 𝘸𝘩𝘦𝘳𝘦 𝘸𝘦 𝘤𝘢𝘵𝘤𝘩 𝘵𝘩𝘦 𝘦𝘷𝘦𝘯𝘵 𝘴𝘦𝘯𝘵 𝘣𝘺 𝘵𝘩𝘦 𝘤𝘩𝘪𝘭𝘥