CODEWITHSUNDEEP
angularjsangularjs-directive
Rendy
Rendy

Reputation: 5698

Load different directive depend on screen size at AngularJS?

I have 1 different component layout loaded by directive at bigger and smaller screen.

Is it possible to do that at AngularJS?

Have read the doc from here and here but no luck

Upvotes: 0

Views: 1067

Answers (2)

Jeyenth
Jeyenth

Reputation: 492

You can use the $window.innerWidth property inside your directive and manipulate your template accordingly.

Upvotes: 0

Mistalis
Mistalis

Reputation: 18269

You can get screen size in Angular with:

$scope.windowWidth = $window.innerWidth;

Based on this line, just ng-if or ng-show your div:

<div directive1 ng-if="windowWidth < 768">
    Directive1 on small screens
</div>

<div directive2 ng-if="windowWidth >= 768">
    Directive2 on large screens
</div>

Upvotes: 2

Related Questions