CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
user2828442
user2828442

Reputation: 2525

CSS style not taking effect

Brief Explanation: Due to some requirement, HTML code is written in home.ts and is loaded on home.html. CSS style is written in home.ts style component.

Problem: CSS style is not getting effected in the HTML code.

home.ts code:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styles:[`.p-tag{font-size:20px; color:red;}`]
})
export class HomePage {
code2='';

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {

  }

  ionViewDidEnter()
  {
// css .p-tag style is not effecting in below line on html page
   this.code2 = '<p class="p-tag">Html code From ts file.</p>';
  }

}

home.html code:

<ion-content>
    <div [innerHtml]="code2 | noSanitize"></div>
</ion-content>

For some reason we cannot call css from .scss file. We need to keep both css and html in ts as shown in above code.

Upvotes: 1

Views: 1011

Answers (2)

Amaldev ps
Amaldev ps

Reputation: 265

Use encapsulation: ViewEncapsulation.None in @Component Like as below

import {ViewEncapsulation } from '@angular/core';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styles:['home.css'],
  encapsulation: ViewEncapsulation.None
})
export class HomePage {
code2='';

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {

  }

  ionViewDidEnter()
  {
// css .p-tag style is not effecting in below line on html page
   this.code2 = '<p class="p-tag">Html code From ts file.</p>';
  }

}

Upvotes: 1

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

Try the below code, I hope it'll help you out. Thanks

Reference Link: https://angular.io/guide/component-styles

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styles:['.p-tag{font-size:20px; color:red;}']
})
export class HomePage {
code2='';

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {

  }

  ionViewDidEnter()
  {
// css .p-tag style is not effecting in below line on html page
   this.code2 = '<p class="p-tag">Html code From ts file.</p>';
  }

}

Upvotes: 0

Related Questions