title: can we override the default styles of selector with custom css in angular
body: <p>I have default styles set for a control (button), selector is app-button, btn in button.css</p>
  
  <pre><code>&lt;button class="btn"&gt;{{SampleText}}&lt;/button&gt;
  </code></pre>
  
  <p><strong>button.css</strong></p>
  
  <pre><code>.btn { 
  font-size: 20px;
  font-family: Calibri;
  background-color: white;}
  </code></pre>
  
  <p>In other application i am using this button with the customized style in the sample.css, do not want to have default class btn. </p>
  
  <pre><code>&lt;app-button class="Newbtn" &gt;Hello&lt;/app-button&gt;
  </code></pre>
  
  <p><strong>sample.css</strong></p>
  
  <pre><code>.btn { 
  font-size: 25px;
  font-family: Calibri;
  background-color: Red;}
  </code></pre>
  
  <p>I tried with Input decorator,  @Input() Class: string;</p>
  
  <pre><code>&lt;button [ngClass]="'btn'"&gt;{{SampleText}}&lt;/button&gt;
  &lt;app-button [Class]="'Newbtn'" &gt;Hello&lt;/app-button&gt;
  </code></pre>
  
  <p>this isnt't taking the Newbtn styles declared in sample.css. if i have Newbtn class inside button.css it will take, but i don't want to do that.</p>
  
  <p>if I don't give any styles it is picking btn styles which is correct in my case. but I should also be able to override the default styles mentioned in button.css with new styles in sample.css.</p>
  
  <p>Please suggest me if i want to customize the default styles how can i make it? </p>