How to get Custom CSS based on user input using Angular js

Angular.min.js <ng-app>

·

3 min read

How to get Custom CSS based on user input using Angular js

You been around to many websites which have static response or some of them does have dynamic changes based on user input , In this Blog we will try to modify elements position and its color based on user's input, And give user liberty to manipulate the elements or set the position anywhere User want it to be.

We will be using Angular js basic example and write a simple html file code where user enter the input and can place the element at the described position, and will also be able to change the color of element.

lets get started.

Create a normal html file for example customCss.Html.

Embed the script in your customCss.Html ,for instance, to load angular,

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

The folowing script code will load angular and embed the snippet in your web page.

Now in the body tag add the new div tag with ng-app - The ng-app directive tell's AngularJS that this is the root element of the AngularJS application. All AngularJS applications must have a root element. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.

<div ng-app="" >
</div>

Also, use ng-Model - ngModel is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value.

<div ng-app="" >
   <input  ng-model="top" type="textbox" placeholder="Enter Top position" >
   <input  ng-model="left" type="textbox" placeholder="Enter Left position" >
   <br/>
   <input  ng-model="Colour" type="textbox" placeholder="Enter box Colour" >
    <br/>
</div>

We have asked user to enter the Css manually/custom and using ng-model will pass the input value to the element on which user needs to apply custom CSS.

<div ng-app=""  >

<input  ng-model="top" type="textbox" placeholder="Enter Top position" >
<input  ng-model="left" type="textbox" placeholder="Enter Left position" >
<br/>
<input  ng-model="Colour" type="textbox" placeholder="Enter box Colour" >
<br/>
/
<div style="position: relative;border-style: double ;background-color:{{Colour}}; height:40px;width:55px; top:{{top}}px; left:{{left}}px"> 

</div>
</div>

Once user gets input using ng-model and then we are calling for same input in the div tag using {{ "user input" }} will be replaced with users input and our web page will make changes based on users input, and now let display the custom position by user with same {{}}

Top:{{top}} </br>Left:{{left}} </br>Colour:{{Colour}}

This is how our page will looks before and after as user enters the custom css and the element change its position and color.

See the Output for above code click here Custom Css image.png image.png

Check output here Custom Css.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>
    <h3>Set the value of the input field:</h3>

        <div ng-app=""  >

            <input  ng-model="top" type="textbox" placeholder="Enter Top position" >
            <input  ng-model="left" type="textbox" placeholder="Enter Left position" >
            <br/>
            <input  ng-model="Colour" type="textbox" placeholder="Enter box Colour" >
            <br/>
            /

            <div style="position: relative;border-style: double ;background-color:{{Colour}}; height:40px;width:55px; top:{{top}}px; left:{{left}}px"> 
            Custom Position 
                </br>
                </br>
            Top:{{top}} </br>Left:{{left}} </br>Colour:{{Colour}}
            </div>

        </div>

    </body>

Output : - Custom Css

images.png Conclusion : As we were able to change css based on users input with the help of embed angular js within script tag and using ng-app to declare root element and getting input with ng-model and declaring it within the style declaration and user is able to set the custom position.