Sidenav | Angular Material

 

 dsdffg

§  In this tutorial we will learn Sidenav | Angular Material UI components. 

§  The sidenav components are designed to add side content to a fullscreen app. 

§  to setup a sidenav we use three components the first one is mat-sidenav-container which access a container to the sidenav as well as the main content within the container we have <mat-sidenav> which represents the site content and then we have mat-sidenav-content which represents the main content it is important that the site content and the main content are placed within the container.

If you don't want some elements to be affected by this container for example header and footer you can place them outside the mat-sidenav-container

<mat-sidenav-container>

<mat-sidenav>SideNav</mat-sidenav>

<mat-sidenav-content>Main content</mat-sidenav-content>

</mat-sidenav-container>

§  Save the file and run the application and check the browser the output is not quite what we expect we can see the main content to the side now is not seen.

  §  Actually this is the expected behavior mat-sidenav is always hidden by default. There are couples of ways to open or show the side-nav. the simplest way is to add the opened attribute on the mat-sidenav component.

<mat-sidenav-container>

<mat-sidenav opened>SideNav</mat-sidenav>

<mat-sidenav-content>Main content</mat-sidenav-content>

</mat-sidenav-container>

§  Save the file and check the browser you should be able to see the side-nav as well but UI is not clear so let me add some basic styling . now open app.component.css file

mat-sidenav-container{

height: 100%;

}

mat-sidenav,mat-sidenav-content{

padding: 16px;

}

mat-sidenav{

background-color: lightcoral;

width: 200px;

}

Save  the file and run the application and check the browser.It is much more clear the side-nav appears like an overlay on the main-content and when I click outside the side-nav it closes and we can see the main content now once we close it there there is no way to open it again so rather than setting the opened attribute like here let's bind it to a property which we can then control using a button we will be using two way binding to the first step is to import the formsModule in app.module.ts

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

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

import { AppRoutingModule } from './app-routing.module';

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

import { FlexLayoutModule } from '@angular/flex-layout';

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

import { HomeComponent } from './home/home.component';

import { LoginComponent } from './login/login.component';

import { RegisterComponent } from './register/register.component';

import { NavBarComponent } from './nav-bar/nav-bar.component';

import {ReactiveFormsModule} from '@angular/forms';

import {MatFormFieldModule} from '@angular/material/form-field';

import {MatInputModule} from '@angular/material/input';

import {MatButtonModule} from '@angular/material/button';

import {MatToolbarModule} from '@angular/material/toolbar';

import {MatCardModule} from '@angular/material/card';

import {MatSidenavModule} from '@angular/material/sidenav';

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

@NgModule({

declarations: [

AppComponent,

HomeComponent,

LoginComponent,

RegisterComponent,

NavBarComponent

],

imports: [

BrowserModule,

AppRoutingModule,

BrowserAnimationsModule,

ReactiveFormsModule,

MatFormFieldModule,

MatInputModule,

MatButtonModule,

MatToolbarModule,

MatCardModule,

MatSidenavModule,

FormsModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

§  let's we are using two way Binding in app.component.ts which is the component class i am going to  create a new property called opened and set it to false in the HTML bind the opened attribute to the opened property and create a button that will toggle the open the property value.

§  Save the files and click the browser the side-nav should be initially hidden because we have initialised to false I click on the button and the side navigation shown and click outside the side-nav and it automatically hides this is the first method to show or hide the side-nav.

§  The best is the first method to show or hide the site now before we take a look at the next method I want to quickly show you the different modes that can be applied to a side-nav the mode for a side-nav can be specified using the mode attribute on the mat-sidenav component the default mode is over .

<mat-sidenav-container>

<mat-sidenav mode="over" [(opened)]="opened">SideNav</mat-sidenav>

<mat-sidenav-content>Main content

<button (click)="opened=!opened">Toggle</button>

</mat-sidenav-content>

</mat-sidenav-container>

§  This is the mode we have seen so far we go back to the browser you can see that there is no change from what we have already seen the side-nav floats over the main content which is covered by a backdrop

§  the second possible value for the mode attribute is push Centre change over to push at the of this works in the browser I click on the button the side-nav  appears with this time the side that pushes the primary content that of its way covering it with a backdrop.

<mat-sidenav-container>

<mat-sidenav mode="push" [(opened)]="opened">SideNav</mat-sidenav>

<mat-sidenav-content>Main content

<button (click)="opened=!opened">Toggle</button>

</mat-sidenav-content>

</mat-sidenav-container>

§  The final possible mode is side the mode is equal to side in this mode the side-nav appears side by side with the main content shrinking the main content width to make space for the side-nav.

<mat-sidenav-container>

<mat-sidenav mode="side" [(opened)]="opened">SideNav</mat-sidenav>

<mat-sidenav-content>Main content

<button (click)="opened=!opened">Toggle</button>

</mat-sidenav-content>

</mat-sidenav-container>

§  There are three possible modes are over push and side.

§  The second way to open or close the side now is by invoking the open or closed method on the side-nav itself for this method I will create a template reference variable on the mat-sidenav component and now I can create two buttons that will call the open and close method on this template reference variable .

§  Save the file and go back to the browser I click on open and the side-nav opens I click on close and the side-nav closes to this is the second method.

 §  Third Method is to simply toggle the side-nav I calling the toggle method this is also the approach you might want to take when you have a hamburger icon for example I will create another button in the main content the text is going to be toggle on click of this button I simply call the toggle method on the sidenav reference variable .

<mat-sidenav-container>

<mat-sidenav #sidenav mode="side" [(opened)]="opened">SideNav</mat-sidenav>

<mat-sidenav-content>Main content

<button (click)="opened=!opened">Toggle</button>

<button (click)="sidenav.open()">Open</button>

<button (click)="sidenav.close()">Close</button>

<button (click)="sidenav.toggle()">Toggle</button>

</mat-sidenav-content>

</mat-sidenav-container>

§  Save the and go to the browser and click on the toggle button it opens I click again it closes so these are the three methods.

§  if  you want to perform some action on open or close of the side-nav you can listen to the opened and closed events back in vs code in app.component.ts files I am going to create method called log which accept a parameter called state and simply log that to the console now in HTML we can listen to opened and closed event and call a log method passing the appropriate value so on mat-sidenav listen to open event and call the log method passing  the string opened similarly on the closed event call the method passing in the string closest

<mat-sidenav-container>

<mat-sidenav #sidenav mode="side" (opened)="log('Opened')" (closed)="log('Closed')" [(opened)]="opened">SideNav</mat-sidenav>

<mat-sidenav-content>Main content

<button (click)="opened=!opened">Toggle</button>

<button (click)="sidenav.open()">Open</button>

<button (click)="sidenav.close()">Close</button>

<button (click)="sidenav.toggle()">Toggle</button>

</mat-sidenav-content>

</mat-sidenav-container>

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'LoginRegisterReactiveProject';

opened=false;

log(state){

console.log(state);

}

}

Read more

Subquery

§  Query with in another Query is known as subquery.

§  If you want to fetch data from one table but based on condition of another table then we     should go for Subquery.

§  Types of Subquery: -

1.     Single row Subquery (getting single value) (using = operator)

2.     Multi Sub Query (if query generating more than output value is called [In operator       uses]

v A subquery may occur in:

  §  A SELECT clause

     §  A FROM clause

     §  A WHERE clause

§   The subquery can be nested inside a SELECT, INSERT, UPDATE, or DELETE statement or inside another subquery.

§   A subquery is usually added within the WHERE Clause of another SQL     SELECT statement.

 §   You can use the comparison operators, such as >, <, or =. The comparison operator           can also be a multiple-row operator, such as IN, ANY, or ALL.

Execution Process-

§  Inner most Query To outermost Query except in the case of co-related query.

§  The inner query executes first before its parent query so that the results of an        inner  query can be passed to the outer query.

Que-

 In which case joins required and In Which case Subquery is required?

Ans-

§  If you want to fetch data from multiple table get placed one column from table and another column from second table i.e. if you want to fetch two columns from two table definitely, we should use joins.

§  Subquery said if you are expecting the data from one table but based on condition of another table it is better to use subquery.

select DEPARTMENTNAME from tbldepartment where id=(select DEPARTMENTID from tblemployee where id=1 )

 

SELECT * FROM TBLEMPLOYEE

WHERE DEPARTMENTID IN (SELECT ID FROM TBLDEPARTMENT WHERE DEPARTMENTNAME='Payroll' OR DEPARTMENTNAME='IT')

Write a query to display senior most employee details from emp table.

select *
from emp

where hiredate=( select min(hiredate) from  emp)

Write an query to display junior most employee details from emp table.

select *
from emp

where hiredate=( select max(hiredate) from  emp)

Write a query to display highest sal details emp table
 
select *
from emp

where sal= (select max(sal) from emp)

Write a query to display Second highest sal details emp table.

select *
from emp

where sal= (select max(sal) from emp where sal< select max(sal) from emp))

Write a query to display highest paid deptno emp table.

select deptno from emp where sal=( select max(sal) from emp)

Write an query to display highest paid deptname dept emp table.

select dname from dept

where deptno = (select deptno from emp where sal= (select max(sal) from emp))

Write a query to display the employees who are working under 'BLAKE' from emp table

select * from emp

where mgr= (select empno from emp where ename='BLAKE')

Read more

Directives In Angular

  §  Directives help us is to enable us to give instructions to the Angular on how to render the templates to the DOM. So, they use directives to give instructions to Angular as it is rendering the templates on the screen.

    §  Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

    §  There are two other kinds of directives in Angular, structural and attribute directives.

Structural Directives

§  structural directives are, they help us to alter the layout of our content by helping us to add and remove elements from the DOM.

§  So, using structural directives you add or remove HTML elements from the Dom.
§  There are three common built in structural directives namely
·        ngIf
·        ngSwitch

·        ngFor

ngIf

  §  Structural directives ngIf and ngSwitch which are used to conditionally render HTML elements

     §  Since ngIf is a structural directive it is prefixed with *.

    §  When you use ngIf in your template syntax you will write it as *ngIf

<div *ngIf="selectedItem">..</div>

§  For example, if you apply the *ngIf directive to a div like this in this example, what you're specifying where is that if the selectedItem is not null then this div will be added to the DOM. If that selectedItem is null, then this div, whatever is contained in this div will not be added to the DOM, so you are literally removing this from the DOM if the value turns out to be false. If it turns out to be true, then it is added into the DOM.

In our example we have <div> tag

open app.component.html file.

now we want to use ng-if directive on this div tag . so with-in opening tag use asterisk and then ngIf then we need to assign a true or false value .

let's begin with a straight forward value true this and take a look at the browser we can see gravity4Tech.blogspot.com

app.component.html

<mat-toolbar color="primary">

<div class="container" *ngIf="true">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

Here we are using angular material toolbar.

When we are working with angular material toolbar we need to import MatToolbarModule in app.module.ts file.

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

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

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

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

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({

declarations: [

AppComponent,

],

imports: [

BrowserModule,

BrowserAnimationsModule,

MatToolbarModule,

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Note:-

§  If angular material library is not added in your project then first add angular material library in your project by following commands.

ng add @angular/material

app.component.html

<mat-toolbar color="primary">

<div class="container" *ngIf="true">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

§  Save the project and run the project by the following command in terminal.

ng serve -o

Output

 

  §  let's back in our code I change true to false save this and take a look at the browser gravity4Tech.blogspot.com is not visible anymore.

<mat-toolbar color="primary">

<div class="container" *ngIf="false">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

§  Save the project and run the project by the following command in terminal.

ng serve -o

Output

  §  Setting true or false on the right-hand side is of not much let's assign a property  value now we create a new property call isDisplay name and set it true and assign it to the directive.

     app.component.ts

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

isDisplay=true;

}

app.component.html

<mat-toolbar color="primary">

<div class="container" *ngIf="isDisplay">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

§  Save the project and check the output

*ngIf and Else: if statement with else

  §  When we are working with *ngIf directive can provide an expression which return boolean flag true of false to add or remove the element form DOM having *ngIf directive.if *nfIf directives returns false then we want to perfrom another task then you can use else also with *ngIf.

    §  *ngIf have the else statement with if to handle conditions

<ng-template>
§  The <ng-template> is an Angular element for rendering HTML.

§   It is never displayed directly. In fact, before rendering the view, Angular replaces the <ng-template> and its contents.

§  now save this and take a look at the browser you can see gravity4Tech.blogspot.com and if I change isDisplay to false gravity4Tech.blogspot.com is not displayed.

§  By making use of a property we can add or remove the element in the DOM by toggling property value between true and false.

Syntax:

<ng-container *ngIf="condition; else elseBlock">

Content to render when condition is true.

</ng-container>

<ng-template #elseBlock>

Content to render when condition is false.

</ng-template>

  §  let's take a look an example to see how to implement and else block for the ngIf directive.

<mat-toolbar color="primary">

<div class="container" *ngIf="isDisplay; else elseBlock">

<h1>gravity4Tech.blogspot.com</h1>

</div>

<ng-template #elseBlock>

<h1>Websited is Hidden</h1>

</ng-template>

</mat-toolbar>

 let's take a look at another Syntax that angular provide for the ng-if directive.

  §  In Angular 4.x.x You can use ngIf in four way to achieve simple if else procedure:

Just Use If

<div *ngIf="isValid">

If isValid is true

</div>

Using If with Else (Please notice to templateName)

<div *ngIf="isValid; else templateName">

If isValid is true

</div>

<ng-template #templateName>

If isValid is false

</ng-template>

Using If with Then (Please notice to templateName)

<div *ngIf="isValid; then templateName">

Here is never showing

</div>

<ng-template #templateName>

If isValid is true

</ng-template>

Using If with Then and Else

<div *ngIf="isValid; then thenTemplateName else elseTemplateName">

Here is never showing

</div>

<ng-template #thenTemplateName>

If isValid is true

</ng-template>

<ng-template #elseTemplateName>

If isValid is false

</ng-template>

Note:-

§  ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

isDone = true;

}

1) *ngIf

<div *ngIf="isDone">

It's Done!

</div>

<!-- Negation operator-->

<div *ngIf="!isDone">

It's Not Done!

</div>

2) *ngIf and Else

<ng-container *ngIf="isDone; else elseNotDone">

It's Done!

</ng-container>

<ng-template #elseNotDone>

It's Not Done!

</ng-template>

3) *ngIf, Then and Else

<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">

</ng-container>

<ng-template #iAmDone>

It's Done!

</ng-template>

<ng-template #iAmNotDone>

It's Not Done!

</ng-template>

  §  You can Use <ng-container> and <ng-template> for Achieve This

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>

<div>Template 1 contains</div>

</ng-template>

<ng-template #template2>

<div>Template 2 contains </div>

</ng-template>

Just add new updates from Angular 8.

1.     For case if with else, we can use ngIf and ngIfElse.

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">

Content to render when condition is true.

</ng-template>

<ng-template #elseBlock>

Content to render when condition is false.

</ng-template>

2.     For case if with then, we can use ngIf and ngIfThen.

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">

This content is never showing

</ng-template>

<ng-template #thenBlock>

Content to render when condition is true.

</ng-template>

3.     For case if with then and else, we can use ngIf, ngIfThen, and ngIfElse.

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">

This content is never showing

</ng-template>

<ng-template #thenBlock>

Content to render when condition is true.

</ng-template>

<ng-template #elseBlock>

Content to render when condition is false.

</ng-template>

Read more