AngularJS ngsrcset

AngularJS provides ng-srcset attribute directive for handling multiple images based on condition.
In AngularJS, the ng-srcset directive is used to handling responsive images.
The user can use this directive for displaying different images based on screen width.
In AngularJS, the ng-srcset directive overrides the original src attribute of an <img> element.
If our application has AngularJS code inside the srcset value, the ng-srcset directive should be used instead of srcset.
The ng-srcset directive makes sure the image is not displayed wrong before AngularJS has evaluated the code.
The ng-srcset directive is compiling at the priority level “99”.

Syntax for ng-srcset directive in AngularJS:

<img ng-srcset= “string” ></img>

Parameter value for ng-srcset directive in AngularJS:

Value	Type	Description
string	template	It is a string value, or an expression resulting in a string.

Sample coding for ng-srcset directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                    angular.min.js"></script>
    </head>
    <body ng-app="">
        <h2>ng-srcset Directive in AngularJS Tutorials</h2>
        <div ng- init="source=’logo.png’ ">
        <img ng-srcset=” {{source}} 2x”></img>
    </body>
</html>

Code Explanation for ng-srcset directive in AngularJS:

AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
The AngularJS application is defined by ng-app=" ". The application runs inside the <body> tag. It’s also used to define a <body> tag as a root element.
The ng-init=”source= ‘logo.png’ “ is used to define the initial value of the source variable is “logo.png” image.
The ng-srcset= “{{source}} 2x” is used to dynamically bind source image based on screen width. Here the 2x used for a high pixel density desktop display.

Sample Output for ng-srcset directive in AngularJS:

The output shows that the wikitechy.com logo image was load when the page was load based on the screen width. Here we have used 2x for pixel density which have high pixel density for desktop display.

PDF

AngularJS ngsrcset

Syntax for ng-srcset directive in AngularJS:

Parameter value for ng-srcset directive in AngularJS:

Sample coding for ng-srcset directive in AngularJS:

Code Explanation for ng-srcset directive in AngularJS:

Sample Output for ng-srcset directive in AngularJS:

Related Searches to angularjs ngsrcset directive

Wikitechy

Join our Community

Other Languages