Thursday, April 26, 2018

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>


Wednesday, April 25, 2018

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-eventsnone;
                cursordefault;
            }


<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';
    }

Jquery Select and Change selector and event .How to Post data using jquery to mvc and web api action methods

Jquery :Change event in Jquery Method: Demo     $("#drpCountry").change(function () {             var id = $("#DrpCoun...