Play Audio And Video in Angular 2

Play Audio And Video in Angular 2

HTML 5 Audio Player

<table class="tableStyle">

                    <tr>

                        <th colspan="2" align="center">

                            Audio

                        </th>

                    </tr>

                    <tr>

                       

                        <td>

                            <audio controls>

                                <source src={{audioAttachmentFilePath}} type="audio/ogg">

                                Your browser does not support the audio element.

                            </audio>

                        </td>

                    </tr>

                </table>

HTML 5 Video Player in Angular 2

 HTML 5 Video Player

       <table>

                    <tr>

                        <th>

                            Video

                        </th>

                    </tr>

                    <tr >

                        <td>

                            <video controls style="height:150px;" class="col-md-12">

                <source src={{videoAttachmentFilePath}} type="video/mp4" />

                                Browser not supported

                            </video>

                        </td>

                    </tr>

                </table>

Open html page in modal pop up window screen in Angular 2

Open html page in modal pop  up window screen in Angular 2

1. Create a parent component Parent.component and its html Parent.component.html page.
2. Create a parent component Child.component and its html Child.component.html page.

1. Import import { MatDialog } from '@angular/material' packages in your parent component.

Below is sample code.

Parent Component

import { MatDialog } from '@angular/material'

@Component({

    selector: 'parent',

    templateUrl: '../UI/Parent.component.html' + '

})

export class ParentComponent {

constructor( public dialog: MatDialog) {

   }

OpenModalPopup() {

        //open the dialog

        let dialogRef = this.dialog.open(ChildComponent, {

            height: '500px',

            width: '60%',

        });

dialogRef.afterClosed().subscribe(result => {

       //read the response selected in the pop up windows

  });

  }

}

Parent Component Html

<h1 >Welcome To Parent Page</h1>

<button type="submit" id="Submit" class="btn btn-primary" aria-label="Submit" (click)=" OpenModalPopup();">Open Modal Pop Up</button>

Child Component

@Component({

    selector: 'experience-Association',

    templateUrl: '../UI/Child.component.html' + '

})

export class ChildComponent {

constructor(public dialogRef: MatDialogRef<ChildComponent>,

        @Inject(MAT_DIALOG_DATA) public data: any) { 

    }

Close(): void {

        this.dialogRef.close();

    }

}

Child Component HTML

<h1 >Welcome To Child Page</h1>

<button type="submit" id="Submit" class="btn btn-primary" aria-label="Submit" (click)=" Close();">Close Modal Pop Up</button>

Export HTML to Microsoft Word Document and Download it in the user’ s system.

Export HTML to Micorosoft Word Document and Download in the user workstation. 
\
    Install file-saver from node package manager.

·         Add Below code in your component file.

   DownloadWord() {

        //debugger; 

        var saveAs = require('file-saver');

        //name of the word document to export

        var filename = "DocumentTest.doc";

        //add styles to the word document

        var css = (

            '<style>' +

            '.Ecls {font- size: 20px;color: #ff4400;}' +

            '</style>'

        );

        //export the template to the word document

        var blob = new Blob(['\ufeff', css + this.GenerateHTML()], {

            type: "application/msword;charset=utf-8"

        });

        saveAs(blob, filename);//save the word

    }

    //Generate the HTML

    GenerateHTML(): string {

        var rawHtml = '';

        rawHtml += '<table width="100%">'

        rawHtml += '<tr><td class="Ecls" colspan="1">This is Test</td></tr>'

        rawHtml += '<tr><td></td><td></td></tr>'

        rawHtml += '</table>';

        return rawHtml;

    }

Hide Control Button in Angular using Style.display property

Angular 2  Attribute Directives Example

Hide Control Button in Angular using Style.display property 

Method 1

  <th scope="col" class="col-xs-2" [style.display]="editButtonDisplay">Action</th>

<button type="button" id=""  (click)="Hide()">Hide</button>

In Component

editButtonDisplay: string = 'inline-block';

Hide(): void {     

                    this.editButtonDisplay = "none";

       

    }

Method 2

<button type="submit" id="Submit" (click)="SaveItems();" [hidden]="hide">Submit</button>

<button type="button" id=""  (click)="Hide()">Hide</button>

In Component

  hide: boolean;

Hide(): void {     

                    this.hide = true;

       

    }

Disable Dom elements(Button,Anchor,Dropdownlist) using class in angular 2

Attribute Directives example

Disable Dom elements(Button,Anchor,Dropdownlist) using class in angular 2 

HTML

.disabled {

                pointer-events: none;

                cursor: default;

            }

<a href="javascript:void(0);" (click)="OpenItem();" [class.disabled]="disableAnchorClass">Open Video</a>

<button type="button" (click)="Disable()">Disable</button>

 Component

DisableControl() {

            this.disableAnchorClass = 'disabled';

    }