3

In this post about the angular text editor called textAngular.

I would like to find the textarea element of the directive text-angular. Because it uses bootstrap design and i would like to replace the element to angular-material textarea.

But i have no idea where did the developer place it inside the file.

UPDATE

I cant do an outside css or overriding it css attribute since angular-material textarea doesnt have a css styling approach.

Shift 'n Tab
  • 8,808
  • 12
  • 73
  • 117

1 Answers1

0

Textarea elements are being referred to by using the value of the ng-model attribute.

Also you if you have unresolved problems you can always create a custom css and load that last which will override all others.

You can also use expressions if you do not want to override the bootstrap.

As such. 

<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

More can be read for all the different ways it can be used at Angulars Website https://docs.angularjs.org/api/ng/directive/ngStyle

Update: getting back to CSS overrides.

elements inside an AngularJS application are given certain classes. These classes can be used to style textarea elements according to their state.

The following classes are added:

  • ng-untouched The field has not been touched yet
  • ng-touched The field has been touched
  • ng-pristine The field has not been modified yet
  • ng-dirty The field has been modified
  • ng-valid The field content is valid
  • ng-invalid The field content is not valid

  • ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated

  • ng-invalid-key Example: ng-invalid-required

The classes are removed if the value they represent is false.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<style>
textarea.ng-invalid {
    background-color:pink;
}
textarea.ng-valid {
    background-color:lightgreen;
}
</style>
<body ng-app="">

<p>Try writing in the textarea field:</p>

<textarea ng-model="myName" required>
norcal johnny
  • 2,050
  • 2
  • 13
  • 17
  • i think i cant do that because i wanted to use angular-material textarea in place of textangular textarea that use bootstrap. and i dont wanna override some element css attribute. – Shift 'n Tab Nov 29 '16 at 07:47
  • But isnt it would be easier for me to just simply replace the element instead of writing multiple definition? It would be hard for me to define styles to mimic the angular-material textarea. – Shift 'n Tab Nov 29 '16 at 08:20
  • @ShiftN'Tab then we can use CSS as initially stated. Please see update. – norcal johnny Nov 30 '16 at 10:40
  • I appreciate your answer but, This wont do anything by css just to mimic the textarea angular-material. Please take a look at https://material.angularjs.org/latest/demo/input . – Shift 'n Tab Nov 30 '16 at 11:23
  • @ShiftN'Tab after reading comments. I see you are not looking for the textarea but rather text input area...? – norcal johnny Nov 30 '16 at 11:31
  • Sir what i want is to change the textarea of the TextAngular to use angular-material component because it uses bootstrap for styling but sadly this cannot be simply done by overriding the css since angular-material doesnt have css styling approach. – Shift 'n Tab Nov 30 '16 at 11:38
  • But @hurricane link is awesome. – Shift 'n Tab Nov 30 '16 at 11:38
  • Im not trying to argue the point, but textarea and textfield are 2 completely different things. Im smiling while writing this. :) – norcal johnny Nov 30 '16 at 11:47
  • Oh yea, maybe you may had a point, i realized that it wasnt a textarea it was a div with contenteditable set to true. – Shift 'n Tab Nov 30 '16 at 11:55