Skip to content

Instantly share code, notes, and snippets.

@leonardocregis

leonardocregis/angular 8 - databinding & components

Last active June 25, 2019 22:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save leonardocregis/2e0bbd9cc608c3b25a0333076ad563c3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save leonardocregis/2e0bbd9cc608c3b25a0333076ad563c3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. leonardocregis revised this gist Jun 25, 2019. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -78,3 +78,7 @@
    <ng-content></ng-content>
    </div>
    </div>

    #@ContentChild allow chunk to be accessed of anther component , that is reciving the "local reference"
    @ContentChild('somename') variable: ElementRef;

  2. leonardocregis revised this gist Jun 25, 2019. 1 changed file with 20 additions and 1 deletion.
    21 changes: 20 additions & 1 deletion angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -55,7 +55,26 @@
    class="btn btn-primary"
    (click)="onAddServer(serverContent)">Add Server</button>
    <button

    #or use the decorator @ViewChild() from '@angular/core'
    #a argument is required, and in this case the name of the local reference
    #ViewChild('serverContent', {static: true}) element: ElementRef
    #you can use the component insetead of the the local reference
    #you can use the component insetead of the the local reference

    #ng-content - use it inside your component to allow insertion of code inside the opening and
    # closing tags, this allows you tu put custon content in your component html
    #sample
    #the main component
    <app-mycomponent
    *ngFor="let element of myElements"
    [element]="element"
    >
    </app-mycomponent>
    # the component that will use the inserted value
    <div
    class="panel panel-default">
    <div class="panel-heading">{{ element.name }}</div>
    <div class="panel-body">
    <ng-content></ng-content>
    </div>
    </div>
  3. leonardocregis revised this gist Jun 25, 2019. 1 changed file with 19 additions and 15 deletions.
    34 changes: 19 additions & 15 deletions angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -40,18 +40,22 @@

    #local reference
    #used with the "#" simbol, it covers the html object , and can only be acessed in the template
    #can be used in some cases to replace ngModel
    #its a HTMLInputElement object
    #sample
    ...
    <input
    type="text"
    class="form-control"
    #serverContent>
    ...
    #the code above will have the variable serverContent into the template
    #you can pass it to a methdo
    <button
    class="btn btn-primary"
    (click)="onAddServer(serverContent)">Add Server</button>
    <button
    #can be used in some cases to replace ngModel
    #its a HTMLInputElement object
    #sample
    ...
    <input
    type="text"
    class="form-control"
    #serverContent>
    ...
    #the code above will have the variable serverContent into the template
    #you can pass it to a methdo
    <button
    class="btn btn-primary"
    (click)="onAddServer(serverContent)">Add Server</button>
    <button
    #or use the decorator @ViewChild() from '@angular/core'
    #a argument is required, and in this case the name of the local reference
    #ViewChild('serverContent', {static: true}) element: ElementRef
    #you can use the component insetead of the the local reference
  4. leonardocregis revised this gist Jun 25, 2019. 1 changed file with 17 additions and 0 deletions.
    17 changes: 17 additions & 0 deletions angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -38,3 +38,20 @@
    #and the reciver should now acess like below
    <app-emiter (myoutput)="onMyLocalReciverMethdo($event)"></app-emiter>

    #local reference
    #used with the "#" simbol, it covers the html object , and can only be acessed in the template
    #can be used in some cases to replace ngModel
    #its a HTMLInputElement object
    #sample
    ...
    <input
    type="text"
    class="form-control"
    #serverContent>
    ...
    #the code above will have the variable serverContent into the template
    #you can pass it to a methdo
    <button
    class="btn btn-primary"
    (click)="onAddServer(serverContent)">Add Server</button>
    <button
  5. leonardocregis revised this gist Jun 25, 2019. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -32,5 +32,9 @@
    <app-emiter (createdSomething)="onMyLocalReciverMethdo($event)"></app-emiter>
    #the class Reciever should have the definition of the methdo and the treatament
    onMyLocalReciverMethdo(data: {name: string, content: string}) {

    #@output can have a alias as the @Input, this will be the name to acess outside
    #folowing the sample above the name been change should work like that
    @Output('myoutput') createdSomething = new EventEmitter<{name: string, content: string}>();
    #and the reciver should now acess like below
    <app-emiter (myoutput)="onMyLocalReciverMethdo($event)"></app-emiter>

  6. leonardocregis revised this gist Jun 25, 2019. 1 changed file with 16 additions and 6 deletions.
    22 changes: 16 additions & 6 deletions angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -16,11 +16,21 @@
    [something]="element"
    >
    #output to outside component
    #needs the @Output() from import {Output} from '@angular/core';
    #needs event to be passed out import {EventEmitter} from '@angular/core';
    #the event needs to be created marked to Output of course
    @Output() outsideEvent = new EventEmitter<{name: string, content: string}>();


    #the app-emiter has to have as below
    #needs the @Output() from import {Output} from '@angular/core';
    #needs event to be passed out import {EventEmitter} from '@angular/core';
    #the event needs to be created marked to Output of course
    @Output() createdSomething = new EventEmitter<{name: string, content: string}>();
    #theres the javascript itself to send the even inside the app-emiter
    onAddServer() {
    this.createdSomething.emit({name: this.name, content: this.content});
    }
    #the reciver has something like below
    #remarks the pattern used is onSomethingHappened, the app-emiter is the one sending
    #the event so its in upper layer of app-reciver, and its using the attribute of it to map to the method
    #that will read the event
    <app-emiter (createdSomething)="onMyLocalReciverMethdo($event)"></app-emiter>
    #the class Reciever should have the definition of the methdo and the treatament
    onMyLocalReciverMethdo(data: {name: string, content: string}) {


  7. leonardocregis revised this gist Jun 25, 2019. 1 changed file with 25 additions and 16 deletions.
    41 changes: 25 additions & 16 deletions angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,26 @@
    #component comunication
    #needs to add the @Input from import { Input } from '@angular/core';
    #sample
    ...
    @Input() element: {type: string, name: string, content: string};
    ...
    #this allows a comunication like below, because if not , the element should be availiable outside the component
    <app-server-element
    *ngFor="let element of serverElements"
    [element]="element"
    >
    #the input can have a parameter like @input('something') , this binds the name something to a external variable naem
    <app-server-element
    *ngFor="let element of serverElements"
    [something]="element"
    >

    #input to the componeent
    #needs to add the @Input from import { Input } from '@angular/core';
    #sample
    ...
    @Input() element: {type: string, name: string, content: string};
    ...
    #this allows a comunication like below, because if not , the element should be availiable outside the component
    <app-server-element
    *ngFor="let element of serverElements"
    [element]="element"
    >
    #the input can have a parameter like @input('something') , this binds the name something to a external variable naem
    <app-server-element
    *ngFor="let element of serverElements"
    [something]="element"
    >
    #output to outside component
    #needs the @Output() from import {Output} from '@angular/core';
    #needs event to be passed out import {EventEmitter} from '@angular/core';
    #the event needs to be created marked to Output of course
    @Output() outsideEvent = new EventEmitter<{name: string, content: string}>();




  8. leonardocregis revised this gist Jun 24, 2019. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -9,5 +9,9 @@
    *ngFor="let element of serverElements"
    [element]="element"
    >

    #the input can have a parameter like @input('something') , this binds the name something to a external variable naem
    <app-server-element
    *ngFor="let element of serverElements"
    [something]="element"
    >

  9. leonardocregis revised this gist Jun 23, 2019. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -4,4 +4,10 @@
    ...
    @Input() element: {type: string, name: string, content: string};
    ...
    #this allows a comunication like below, because if not , the element should be availiable outside the component
    #this allows a comunication like below, because if not , the element should be availiable outside the component
    <app-server-element
    *ngFor="let element of serverElements"
    [element]="element"
    >


  10. leonardocregis created this gist Jun 23, 2019.
    7 changes: 7 additions & 0 deletions angular 8 - databinding & components
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    #component comunication
    #needs to add the @Input from import { Input } from '@angular/core';
    #sample
    ...
    @Input() element: {type: string, name: string, content: string};
    ...
    #this allows a comunication like below, because if not , the element should be availiable outside the component