Change CSS of an element using AngularJS

Sunday, 24 August 2014 | Posted by
AngularJS supports .css() jQuery functionality. Here in below examples we can see how to set style to an element.
Angular2 : If you are looking for Angular2 solution, Please click here

Steps to set style to an elemnt :

  1. Get angular element of html element
  2. Use .css() set  style to that element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.css('color','red'));

Set style using ng-style

<html ng-app="" ng-controller="myCtrl">
....
<button ng-click="myStyle={color:'red'}">Set Color</button>
<button ng-click="myStyle={'background-color':'blue'}">Set Background color</button>
<button ng-click="myStyle = {}">Set Background color</button>
<div>Click above buttons</div>
<script>
function myCtrl($scope) {
    $scope.myStyle = {};
}
</script>
Try It Your Self
Labels:

7 comments:

  1. Unknown6 February 2018 at 20:48

    Not Bad

    ReplyDelete
    Replies
    1. Unknown17 September 2020 at 22:20

      Great Article android based projects

      Java Training in Chennai

      Project Center in Chennai

      Java Training in Chennai

      projects for cse

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. alex7 January 2019 at 01:16

    Exciting online games with us best casinos online come in and win right now.

    ReplyDelete
  3. Belago12 February 2019 at 01:52

    Разные виды товаров есть у нас, но лучшее это светодиодная лента купить Украина можно это сделать у компании Экодио

    ReplyDelete
  4. Yakru455 August 2019 at 21:05

    This is really an amazing and thank you so much for sharing

    คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
  5. Ez battery reconditioning10 December 2019 at 10:30

    Ez battery reconditioning reviews - You can now easily revive your old batteries with this
    Ez battery reconditioning pdf which provides step by step instructions for reconditiong a battery.
    Ez battery reconditioning blog publishes how ez battery reconditioning reviews programs works
    and where buy ez recondition battery step by step program online after this candid
    Ez battery reconditioning reviews. ez reconditioning batteries is newbie friendly.
    It may help you set up and run your own battery reconditioning business by learning this skill at home.


    How to recondition a battery with Ez battery reconditioning .
    Have you heard about Tom Ericson's Ez battery reconditioning reviews technique and
    are wondering whether it is possible or not.

    visit https://ezbatteryreconditioninginfo.com/ this site to know more. Thank you every one.

    ReplyDelete
  6. Gold and silver for life reviews3 March 2020 at 08:32

    Big Truck Tow: Heavy Duty towing service san jose

    We're rated the most reliable heavy duty towing san jose service & roadside assistance in San Jose!
    Call us now! We're ready to help you NOW!

    Since 1999, tow truck san jose has provided quality services to clients by providing them
    with the professional care they deserve. We are a professional and affordable Commercial
    Towing Company. BIG TRUCK TOW provides a variety of services, look below for the list of
    services we offer. Get in touch today to learn more about our heavy duty towing


    Click here to Find tow truck near me

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts