@ViewChildren in between components to Components

child.components.ts

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-child',

templateUrl: './child.component.html',

styleUrls: ['./child.component.css']

})

export class ChildComponent implements OnInit {

public var_one:string;
public var_two:string;

constructor() {

this.var_one="This is coming from Child Component";

this.var_two="Text Coming from Child Component."
}

ngOnInit() { }

}

child.component.html

<h1>{{var_one}}</h1>

<h1 style="color: brown">{{var_two}}</h1>

parent.components.html

<app-child></app-child>

<app-child></app-child>

<app-child></app-child>

<app-child></app-child>

<button (click)="clickMe()">Click Me Btn</button>

parent.components.ts

import { Component, OnInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({

selector: 'app-parent',

templateUrl: './parent.component.html',

styleUrls: ['./parent.component.css']

})

export class ParentComponent implements OnInit {

// @ViewChild(ChildComponent)

// private _child:ChildComponent;

@ViewChildren(ChildComponent)

private _child:QueryList<ChildComponent>=new QueryList;
private my_array:Array<any>;

constructor() { }

ngOnInit() {

}

public clickMe():any{

// this._child.var_one = "Message from Parent Component";

// this._child.var_two = "Marquee coming from Parent Component"

// this.my_array[0].var_one="Hello One";

//this.my_array[0].var_two="Hi....1";

// this.my_array[1].var_one="Hello Two";

//this.my_array[1].var_two="Hi...2";

for(var i:number=0; i<this.my_array.length;i++){

this.my_array[i].var_one="Hello World";

this.my_array[i].var_two="Hi....";

}

}

ngAfterViewInit(){

this.my_array=this._child.toArray();

}

}

Out Put

after click button   output

Multiple Div's hide and show in angular

Multiple Div's hide and show in angular2, 4, 5 & 6

app.component.html
-------------------------

<h1> Hide and Show Function in angular 4 </h1>

<button (click)="toggle()">{{buttonName}}</button>

<button (click)="toggle2()">{{buttonName2}}</button>


<ng-container *ngIf="show">
  <div>
    <label>Name:</label>
    <input id="tbname" name="yourname" />
  </div>
  <div>
    <label>Email Address:</label>
    <br>
    <input name="email" id="email" />
  </div>
  <div>
    <label>Additional Information (optional):</label>
    <br>
    <textarea rows="5" cols="46" style="float: left;"></textarea>
  </div>
</ng-container>


<ng-container *ngIf="show2">
  <div>
    <label>Name2:</label>
    <input id="tbname" name="yourname" placeholder="Enter Name" />
  </div>
  <div>
    <label>Email Address2:</label>
    <br>
    <input name="email" id="email" placeholder="Enter Email ID"/>
  </div>
  <div>
    <label>Additional Information (optional):</label>
    <br>
    <textarea rows="5" cols="46" style="float: left;" placeholder="Enter Comments"></textarea>
  </div>
</ng-container>


app.component.ts
----------------------

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public show:boolean = false;
  public buttonName:any = 'Show';

  public show2:boolean = false;
  public buttonName2:any = 'Show2';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;
    this.show2=false;
    this.buttonName2="Show2"

    // CHANGE THE NAME OF THE BUTTON.
   
    if(this.show) 
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }

  toggle2() {
    this.show2 = !this.show2;
    this.show=false;
    this.buttonName="Show"

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show2) 
      this.buttonName2 = "Hide2";
    else
      this.buttonName2 = "Show2";
  }

}

Single Div hide and show in angular

Div hide and show in angular

app.component.html
-------------------------

<button (click)="toggle()" id="bt">
    {{buttonName}}
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: left;">
        <div>
            <label>Name:</label>
            <div><input id="tbname" name="yourname" /></div>
        </div>
        <div>
            <label>Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Additional Information (optional):</label>
            <div><textarea rows="5" cols="46"></textarea></div>
        </div>
    </div>
</ng-container>



app.component.ts
----------------

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show:boolean = false;
  public buttonName:any = 'Show';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show) 
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }
}

Custom Directives in angular 2, 4, 5, 6

   Custom Directives 

- Creating our own directive based on application requirement
  Called as Custom Directive.

- In Angular, we can Use Custom Directives in 2 ways.

1) Attribute Type

2) Structural Type


 Attribute Type 


- Directive is the predefined class used to create the Custom Directive

- ElementRef is the Predefined Class used to manipulate the DOM Elements.

- HostListener is the Predefined Class used to apply the mouse events.

- Input is the Predefined Class used to pass the Dynamic Data to Custom Directive.

- Attribute Type Custom Directive won't work with the DOM Directly(memory).



         Structural Type Custom Directives 

- Structural Type Custom Directives will works with the DOM Directly.

- Structural Type Custom Directives prefix with "*"

- TemplateRef is the predefined class used to manipulate the Templates

- ViewContainerRef used to manipulate the DOM.


myDirective.ts 

import { Directive,

  ElementRef,

  HostListener,

  Input } from "@angular/core";

@Directive({

selector:"[myDir]"

})        

export class MyDirective{

@Input() var_one;

@Input() var_two;

constructor(private _el:ElementRef){}

public hiliteColor(color){

 this._el.nativeElement.style.backgroundColor = color;

}

@HostListener("mouseenter") onmouseenter(){

 this.hiliteColor(this.var_one);

};

@HostListener("mouseleave") onmouseleave(){

 this.hiliteColor(this.var_two);

};

}

app.component.ts 

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'app';

}

app.component.html 

<h1 [var_one]=color_one [var_two]=color_two myDir>Hello....!</h1>

<input type="color" [(ngModel)]="color_one"> <br><br>

<input type="color" [(ngModel)]="color_two"> <br><br>

<h1 *hello=false>Hi....!</h1>

structural.directive.ts 

import { Directive,

  TemplateRef,

  Input,

  ViewContainerRef } from "@angular/core";

@Directive({

selector:"[hello]"

}) 

export class StructuralDirective{

constructor(private _templateRef:TemplateRef<any>,

         private _viewContainerRef:ViewContainerRef){}

@Input() set hello(isHidden:boolean){

 if(isHidden){

     this._viewContainerRef.createEmbeddedView(this._templateRef);

 }else{

     this._viewContainerRef.clear();

 }

}           

}      

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { MyDirective } from "./my.directive";

import { FormsModule } from "@angular/forms";

import { StructuralDirective } from "./structural.directive";

@NgModule({

  declarations: [

    AppComponent,

    MyDirective,

    StructuralDirective

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }