manoj10101996
/ app.component.html
Created
March 23, 2025 13:46
Angular sharing data between components - input() / output() / model() signals
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="p-5"> | |
| <h1> | |
| Parent component | |
| </h1> | |
| <hr> | |
| <div class="card card-body bg-warning text-bg-warning"> | |
| Value from parent: {{counter}} | |
| </div> | |
| <hr> | |
| <input type="number" [(ngModel)]="counter" class="form-control"> |
manoj10101996
/ app.component.html
Created
March 23, 2025 04:06
Accepting & Receiving data with input / output decorators properties [Parent to Child] - @input() , @output() decorator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <app-child-input-decorator [counter]="counterParent" (counterEmit)="receiveCounter($event)" ></app-child-input-decorator> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Mixins | |
| mixin input(type, label) | |
| .input-container | |
| input(type='#{type}' id='#{label}' required) | |
| label(for='#{label}')=label | |
| .bar | |
| mixin button(text) | |
| .button-container | |
| button | |
| span=text |