youtube-dl

Official website :

https://yt-dl.org/

How to install youtube-dl (Requires python)

sudo apt-get remove youtube-dl
sudo apt-get install python-pip  
pip install --user youtube-dl  

How to download youtube videos using youtube-dl

cd <directory to be downloaded>
youtube-dl <youtube-url>

Download Youtube Playlis

youtube-dl -i PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU
#or
youtube-dl -i -f mp4 --yes-playlist 'https://www.youtube.com/watch?v=bV8emCBmFHk&amp;list=PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU'

Command :

youtube-dl -h //Help
youtube-dl -F <video-link> //Other Formats list
youtube-dl -f 299+32 <video-link> //Other Formats download from the previous list

Documentation of youtube-dl

https://github.com/ytdl-org/youtube-dl/blob/master/README.md#readme

Angular Material Icons

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

material.module.ts (a new module added)

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div><mat-icon color="primary">description</mat-icon></div>
<div><mat-icon color="accent">card_giftcard</mat-icon></div>
<div><mat-icon color="warn">commute</mat-icon></div>

Output :

Angular Material Button Toggle

  • Button Toggle is an element with an appearance of an Button and can toggle between on and off states.
  • Button toggle can be used individually or can be used as an alternative to checkbox and radio button

material.module.ts (New Module added)

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  Status : {{toggleBtn1.checked}}
  <mat-button-toggle #toggleBtn1 class="alignCss">Toggle</mat-button-toggle>

  Status : {{toggleBtn2.checked}}
  <mat-button-toggle #toggleBtn2 checked class="alignCss">Toggle</mat-button-toggle>

</div>
<div>

</div>
<div>
  <mat-button-toggle disableRipple class="alignCss">RippleDisabled</mat-button-toggle>
  <mat-button-toggle disabled class="alignCss">Disabled Toggle Off</mat-button-toggle>
  <mat-button-toggle checked disabled class="alignCss">Disabled Toggle On</mat-button-toggle>
</div>
<div>
  Radio Button like toggle
  <mat-button-toggle-group #toggleGroup1="matButtonToggleGroup">
    <mat-button-toggle value="angular">Angular</mat-button-toggle>
    <mat-button-toggle value="react">React</mat-button-toggle>
    <mat-button-toggle value="vue">Vue</mat-button-toggle>
  </mat-button-toggle-group>
  Value : {{toggleGroup1.value}}
</div>
<div>
  Checkbox like toggle
  <mat-button-toggle-group #toggleGroup2="matButtonToggleGroup" multiple>
    <mat-button-toggle value="English">English</mat-button-toggle>
    <mat-button-toggle value="Hibru">Hibru</mat-button-toggle>
    <mat-button-toggle value="Latin">Latin</mat-button-toggle>
  </mat-button-toggle-group>
  Value : {{toggleGroup2.value}}
</div>
<div>

</div>

app.component.css

mat-button-toggle.alignCss{
  margin-right: 3rem;
}

Angular Material Buttons

material.module.ts (a new module created)

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

const MaterialComponent = [
  MatButtonModule,
];

@NgModule({
  imports: [
    MaterialComponent
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

app.module.ts

import { MatButtonModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

<div>
  <button mat-button>Click Me!</button>
  <button mat-raised-button>Click Me!</button>
  <button mat-flat-button>Click Me!</button>
  <button mat-stroked-button>Click Me!</button> <!-- Outlined -->
</div>

<div>
  <button mat-icon-button>Icon</button>
  <button mat-fab>Fab</button>
  <button mat-mini-fab>Mini Fab</button>
</div>

<div>
  <button color="primary" mat-button>Icon</button>
  <button color="accent" mat-button>Fab</button>
  <button color="warn" mat-button>Mini Fab</button>
  <button color="primary" mat-raised-button>Icon</button>
  <button color="accent" mat-raised-button>Fab</button>
  <button color="warn" mat-raised-button>Mini Fab</button>
</div>

<!-- disable the ripple -->
<div>
  <button mat-raised-button disableRipple color="primary">Ripple Animation Disabled</button>
</div>

app.component.css

button{
  margin-right: 3rem;
}

Typography

  • Typography deals with style and appearance of text on the website.
  • We your website contains my text displayed on it with multiple fonts and sizes it ruins the UI, to address this concern Typography came into picture.Typography levels can be used to address this problem.
  • Each Typography level has it definite font size, font weight and line height.

Add a new module using ng module material and follow below files :

app.module.ts

import { MatButtonModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

material.module.ts (A New module created)

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

const MaterialComponent = [
  MatButtonModule,
];

@NgModule({
  imports: [
    MaterialComponent
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

app.component.html

<div class="mat-display-4">This is display 4</div>
<div class="mat-display-3">This is display 3</div>
<div class="mat-display-2">This is display 2</div>
<div class="mat-display-1">This is display 1</div>

<div class="mat-headline">This is a heading for h1</div>
<div class="mat-title">This is a heading for h2</div>
<div class="mat-subheading-2">This is a heading for h3</div>
<div class="mat-subheading-1">This is a heading for h1</div>

<!-- Body content of the page-->
<div class="mat-body-1">This is body text</div>
<div class="mat-body-2">This is bold body text</div>
<div class="mat-caption">This is caption text</div>

<!-- Use the H1 and H2 and other tags normally just wrap them in mat-typography class-->
<div class="mat-typography">
  <h1>This is heading h1</h1>
  <h2>This is heading h2</h2>
  <h3>This is heading h3</h3>
  <h4>This is heading h3</h4>
</div>

Output :

Material Module

  • We will create a separate component that deals with importing and exporting of Material Component.

Let generate a new module using below command :

ng g m material

material.module.ts

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

const MaterialComponent = [
  MatButtonModule,
];

@NgModule({
  imports: [
    MaterialComponent
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

app,module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

<button mat-raised-button>Hello World</button>

Output :

Add Angular Material to a project

ng add @angular/material
  • Select the theme indigo pink
  • Say yes to HammerJS
  • Say yes to browser animation of Angular Material

To test if the Angular material is added properly we add a angular button component and test it.

app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<button mat-raised-button>Hello World</button>

Angular Material

What is Angular Material?

  • It is a UI component library
  • Helps to build good user interface is less time.
  • It is an implementation of Google Material Design specification.
  • Just like React has MaterialUI, Vue has vuetify, Angular has Angular Material
  • Website of Anglar material : https://material.angular.io/

Following are the steps involved :

  1. Add angular to an Application
  2. Typography
  3. Component
    • Buttons and Indicators
    • Navigation
    • Layout
    • Form Control
    • Popups and Modals
    • Data Tables

Bootstrap Forms

  • Three types of forms layout
    • Vertical (Default)
    • Inline
      • Class name form-inline and it adds online the form controls in online line
    • Horizontal
      • Class name “form-horizontal” has to be used in <form> tag to create a horizontal form layout.
      • We need to add col-md-x and control-label(control label for label and text box alignment) class to the <label> tag
      • We need to add form control like input into a div tag and add col-md-x class as well for that div tag
  • form-group class can be added into a div tag and that div tag which can have 2 tags a label and a form element tag.
  • form-control is a class which can be applied to form elements like input type text or select of any other form elements, this class gives them a bootstrap look.

Example :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="page-header">
                <h1>Bootstrap Form Designing</h1>
            </div>
            <form class="">
                <div class="form-group">
                    <label for="UserName">User Name</label>
                    <input class="form-control" type="text" name="UserName" id="UserName">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input class="form-control" type="email" name="email" id="email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input class="form-control" type="password" name="password" id="password">
                </div>
                <div class="form-group">
                    <label for="confirmPassword">Confirm Password</label>
                    <input class="form-control" type="password" name="confirmPassword" id="confirmPassword">
                </div>
            </form>


            <div class="page-header">
                <h4>Bootstrap inline Form Designing</h4>
            </div>
            <form class="form-inline">
                <div class="form-group">
                    <label for="UserName">User Name</label>
                    <input class="form-control" type="text" name="UserName" id="UserName">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input class="form-control" type="email" name="email" id="email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input class="form-control" type="password" name="password" id="password">
                </div>
                <div class="form-group">
                    <label for="confirmPassword">Confirm Password</label>
                    <input class="form-control" type="password" name="confirmPassword" id="confirmPassword">
                </div>
            </form>

            <div class="page-header">
                <h4>Bootstrap Horizonal Form Designing</h4>
            </div>
            <form class="form-horizontal">
                <div class="container">
                    <div class="row">
                        <div class="form-group form-group-sm col-sm-6">
                            <div class="row">
                                <label for="first_name" class="col-sm-3 col-form-label">First Name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="first_name" name="first_name">
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-sm col-sm-6">
                            <div class="row">
                                <label for="last_name" class="col-sm-3 col-form-label">Last Name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="last_name" name="last_name">
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-sm col-sm-6">
                            <div class="row">
                                <label for="Street" class="col-sm-3 col-form-label">Street</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="Street" name="Street">
                                </div>
                            </div>
                        </div>
                        <div class="form-group form-group-sm col-sm-6">
                            <div class="row">
                                <label for="City" class="col-sm-3 col-form-label">City</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="City" name="City">
                                </div>
                            </div>
                        </div>
            
                    </div>
            
                </div>
            </form>

        </div>
    </body>
</html>

Output :