Ionic CSS Classes Assignment

Ionic CSS classes assignment

ion-header is an angular directive (as is ion-toolbar). Directives can have an associated HTML template and javascript. The extra classes are added by the javascript that belongs to each directive. The code below demonstrates an angular directive where a class is added to the original element. If you inspect the results you can also see an extra div being added - that is the result of the directive's template being added to the DOM.

(function() {  var app = angular.module("soDemo", []);  app.directive("soDirective", SoDirective);
  function SoDirective() {    var directive = {      restrict: 'E',      scope: {},      link: link,      template: '<div class="content">My directive contents</div>'    };    return directive;    ///////////////////    function link(scope, element) {      element.addClass('sample-class');            console.log(element.html());    }  }})();

.sample-class {  display: block;  border: 1px solid red;}
.content {  font-style: italic;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="sample" ng-app="soDemo">  <so-directive></so-directive></div>

Transfer data between classes on click Angular 2/ Ionic 2

An example of how to inject a service to share data globally from my answer here:

---

Using a provider to hold global data is working for me in Ionic 2 beta 6, and I believe it is the recommended practice in Angular 2.

Generate a provider from the command line: ionic g provider GlobalService Notice how the generated service is decorated with @Injectable

Inject your service in the @App class; you do this by declaring it in the providers array:

  @App({
        templateUrl: 'build/app.html',
              providers: [GlobalService] ,
              config: {} // http://ionicframework.com/docs/v2/api/config/Config/
            })

This will create an single instance of your provider that is accesible on every page. Wherever you need to use it, do not declare in the providers array, but on the constructor of the Page:

@Page({
        templateUrl: 'build/pages/new-page/new-page.html',
      })
      export class NewPage{

       constructor(public globalService: GlobalService) {
    }

    someFunction(){
    this.globalService.someGlobalFunction();
    }

Adding multiple class using ng-class

To apply different classes when different expressions evaluate to true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

To apply multiple classes when an expression holds true:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

or quite simply:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

Notice the single quotes surrounding css classes.

Add class to an element in Angular 4

Use [ngClass] and conditionally apply class based on the id.

In your HTML file:

<li>
    <img [ngClass]="{'this-is-a-class': id === 1 }" id="1"  
         src="../../assets/images/1.jpg" (click)="addClass(id=1)"/>
</li>
<li>
    <img [ngClass]="{'this-is-a-class': id === 2 }" id="2"  
         src="../../assets/images/2.png" (click)="addClass(id=2)"/>
</li>

In your TypeScript file:

addClass(id: any) {
    this.id = id;
}

Generate dynamic css based on variables angular

Direct approach available in angular is using ngstyle as follows

<div [ngStyle]="{'color': style.colorVal ? style.colorVal : '#000', 'font-size' : style.fontSize ? style.fontSize : '16px' }"></div>

After going through different methods and approached to add dynamic css to all pages on angular app I ended up with following solutions.

Requirement : generate dynamic css based on values returned from and API to change design and styling.

Solution :

1. create a new component and create a service to load dynamic css variables from API.
2. Add style tag in template file and use variable values for properties.
3. Load this template on all pages or on main template.
4. On app build style will be moved to head tag.

Code sample

import { CssService} from './Css.service';

@Component({
  selector: 'DynamicCss',
  templateUrl: './DynamicCss.component.html',
  styleUrls: ['./DynamicCss.component.scss']
})
export class ServiceProviderComponent implements OnInit {
    cssVariables: any;
    constructor(private cssService:CssService){
        /* call the service/api to get the css variable values in cssVariables */

    }
}

Now apply css using jquery or javascript to append css with help of function like following

appendCss(customData)
{
     let text = '.custom-form-1 {
            background-image: url("`+customData.background_image+`");
         }';
     $(document).ready(function(){
         $("style").append(text);
      });
}

and call this function after loading custom data from service or other variable like I did it ngOnInit

ngOnInit(){
 this.appendCss(this.customizeFormData);
}

Its using jquery but can be done with javascript/typescript as well if you dont want to use jquery in your angular app

Other useful resource https://github.com/angular/angular/issues/9343#issuecomment-312035896

---

Related Topics