Show Hide or Toggle Elements In Angular 5 and 4

In this post, I am sharing a sample code for demo “how to toggle or show and hide elements in Angular 5 and 4”. In the current scenario, I have a HTML <div> element, which contains some HTML elements like textbox, password and buttons. It will show and hide the dive – form elements after click on button.

Let’s see in the below example -

Component.html -

<button (click)="toggle()" id="btToggle" class="btn btn-info btn-lg" >{{button_name}}</button>

<div>

<div>Email - <input id="email" type="text" name="txtEmail" /></div>

</div>

<div>

<div>Password - <input id="txtPasword" type="password" name="password" /></div>

</div>

<div>

<label>About you (optional)-</label>

</div>

<div>

</div>

Component.ts –

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

import {FormGroup, FormControl, Validators} from '@angular/forms';

import { stringify } from '@angular/core/src/render3/util';

import { variable } from '@angular/compiler/src/output/output_ast';

import { trigger,state, group, style,transition,animate,keyframes,query,stagger } from '@angular/animations';

@Component({

selector: 'app-user',

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

styleUrls: ['./user.component.css'],

animations: [ ]

})

export class UserComponent implements OnInit {

date; //date Variable

logedInForm; //These are variables

emailId;

password;

public show_dialog : boolean = false;

public button_name : any = 'Show Login Form!';

constructor() { }

ngOnInit() {

this.date = new Date(); // Today date and time

//Login Validation

this.logedInForm = new FormGroup({

emailId: new FormControl("youremail@gmail.com",

Validators.compose([

Validators.required,

Validators.pattern("[^ @]*@[^ @]*")

])),

password: new FormControl('YourPassword', [

Validators.minLength(8),

Validators.required])

});

}

toggle() {

this.show_dialog = !this.show_dialog;

// CHANGE THE TEXT OF THE BUTTON.

if(this.show_dialog)

this.button_name = "Hide Login Form!";

else

this.button_name = "Show Login Form!";

}

Result looks like –

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2