CSS style not taking effect

Question

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.

See here if it helps https://stackoverflow.com/a/49792898/1160794 — David, Mar 22 '19 at 09:21

score 1 · Answer 1 · answered Mar 22 '19 at 08:34

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>';
  }

}

score 0 · Answer 2 · answered Mar 22 '19 at 07:24

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>';
  }

}

CSS style not taking effect

2 Answers2