How to apply/prevent overwriting/overriding css/style using javascript/angularJs?

Question

I am new to angularJs. there is a requirement need to assign css property to component at/from js file level. I have kept debugger, after assign css style to component. In debugger level I can able to see all applied css property to component behavior will be good. Once completes page load, I am not able to see applied css, from js file. From my side may be some overwriting/removing css style. How to achieve this one using angular/JavaScript/J query, great appreciate.

Here is my code.

By AngularJS

angular.element.find('.ctp-textfield')[0].style.width = "75px !important";
angular.element.find('.ctp-textfield')[0]["ng-style"] = "{height: 75px}";

By JavaScript

document.getElementById('Idname').style.width = "75px !important"; 

By JQuery

$('#idname')[0].style.width = "75px !important";
$('#idname').style.width = "75px !important";

Answer 1

The way to do DOM manipulation in Angular is to use a directive. All of the above snippets of code look like they are not running inside the link function of a directive so will not work as you expect (but theres not enough context to tell what you're doing).

see:

• https://docs.angularjs.org/guide/directive
• http://www.sitepoint.com/practical-guide-angularjs-directives/
• http://www.ng-newsletter.com/posts/directives.html
• http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/
• https://github.com/angular/angular.js/wiki/Understanding-Directives