title: Angular add style tag into innerHTML
body: <p>I create an Angular project and I wanted to insert <code>style</code> CSS into the html, but I don't want the inserted CSS replace other style that have the same tag or class name.</p>
  
  <pre><code>const testStyle = '&lt;style&gt;
    body {color: red}
    table {width : 200px}
    h1{font-size:12px}
    .another-same-class-name{color: blue;font-size: 13px}
  &lt;/style&gt;'
  </code></pre>
  
  <p>Above is my sample style that I want to insert into my component template</p>
  
  <p>My Component</p>
  
  <pre><code>@Component({
  
     selector : 'app-my-component',
     templateUrl: './my-template.component.html',
     styleUrls: ['./my-style.component.scss'],
  
  })
  
  export class MyComponent{
  
    myStyle:string
  
    ...
  
    ngOnInit(){
      const testStyle = '&lt;style&gt;
                           body {color: red}
                           table {width : 200px}
                           h1{font-size:12px}
                          .another-same-class-name{color: blue;font-size: 13px}
                        &lt;/style&gt;'
  
      this.myStyle = testStyle
  
    }
  
  
    updateCss(newCss){
      this.myStyle = `&lt;style&gt;${newCss}&lt;/style&gt;`
    }
  
  
  }
  
  
  &lt;div #styleWillGoHere [innerHtml]="myStyle"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Edit: I have update my question, to make it more clear :)</p>
  
  <p>I appreciate any kind of solution.</p>