CSS Is Not Working in My Angular Component

CSS is not working in my angular component

I believe the problem you’re having is because you’re declaring the styleUrls on the parent component and due to encapsulation they are not available in the child component. You have to move it to the rating component.

In case you want to keep it on the level you currently have you need to make the view encapsulation none on the rating component.

selector: 'rating',
encapsulation: ViewEncapsulation.None

I believe you also are misusing the content css property. You need to used either the ::before or ::after pseudo elements

.star.star-full-icon::after{
    content:'X';
}
.star.star-empty-icon::after{
    content:'O';
}

Style.css of Angular not applying to certain Component

Try to remove styles from the your.component.css which overlapps in styles declared in styles.css and all global styles should be applied.
Or you override your styles in styles.css by declaring new classes which are placed lower than your desired styles.

Some your global styles are not applied because of CSS specifity rule.
Read a great article at mdn about CSS speicifity.

Try to avoid using !important keyword by using CSS specifity rules. It's almost never a good idea to use !important.

UPDATE:

Chrome Developer tools shows that CSS properties 'trans-msg-his-dialog' are overridden. It can be seen by struck-through lines at CSS properties.

1. You can see which properties won by clicking Computed style tab:
   

2. Or try to move these styles to the bottom of style.css file:

   .content-body a {
       cursor: pointer;
       text-decoration: none;
       color:  #4c90c7
   }
   
   .content-body a:hover {
       color: #346092;
   }
   
   .content-body a:visited {
       text-decoration: none;
       color: #4c90c7
   }
   

UPDATE 1:

Now we know that Bootstrap style has too strong selectors and overrides your anchor:

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

We see that if <a> tag does not have href or tabindex attributes, then it will have color: inherit and text-decoration: none;. So try to add href attribute to your anchor tag:

<a href="javascript:;">Button</a>

Angular component css not added to head

It may happen when @angular-devkit/build-angular version doesn't match the rest of the angular packages.

In my case my @angular-devkit/build-angular package was at v13.2.5 whereas all my other packages were mostly 13.1.1.

Once I updated all my angular packages to 13.2.6, no more style issues.

I also tried to replicate the issue after the update, but no luck...

Why is the CSS not being applied in my Angular project that uses the Angular Materials Side Nav Bar?

You need to add the angular material's prebuilt theme in global style.scss file.

Without this, none of the styles of angular material component would be applied.

Add following line in style.scss file:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

CSS styles not working on already existing component/body tag

By default angular only applies the styles within a component, only to HTML elements within that components template (view encapsulation). To override this behaviour you can set an option in the components directive.

For more info see https://angular.io/guide/component-styles#view-encapsulation

Angular: Component scss styles not applied to tags supplied to [innerHTML] of div?

You should disable encapsulation for that component. You can do it like this:

import { Component, ViewEncapsulation } from '@angular/core';
...
@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

:root selector is not working in the Angular component

You can't use the :root selector in an Angular component, it just simply won't work, neither should it. Check out https://github.com/angular/angular/issues/32177.

Angular 7 - Material component CSS not loading

Here is an example of how i have declared one in the past hopefully it will help:

<form (submit)="onSaveProject(projectForm, projectForm.value)" #projectForm="ngForm" *ngIf="!isloading">
 <mat-form-field>
  <input matInput type="text" name="projectDescirption" 
  [ngModel]="project?.projectDescirption"
  required
  minlength="5"
  placeholder="Project Description"
  #projectDescirption="ngModel">
  <mat-error *ngIf="projectDescirption.invalid">Please descibe the project (minimum 5 characters)</mat-error>
 </mat-form-field>
</form>

Also ensure you have the module imported, again here is an example of how i have done it in the past:

app.moudle.ts

import { 
 MatInputModule,
 MatCardModule,
 MatButtonModule,
 MatFormFieldModule,
 MatToolbarModule,
 MatExpansionModule,
 MatProgressSpinnerModule,
 MatPaginatorModule,
 MatDialogModule,
 MatOptionModule,
 MatSelectModule,
 MatDividerModule,
 MatCheckboxModule,
 MatSlideToggleModule,
 MatProgressBarModule,
 MatDatepickerModule,
 MatNativeDateModule
} from '@angular/material';

@NgModule({
 imports: [
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatFormFieldModule,
  MatToolbarModule,
  MatExpansionModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatDialogModule,
  MatOptionModule,
  MatSelectModule,
  MatDividerModule,
  MatCheckboxModule,
  MatSlideToggleModule
]
})

Angular not working some styles in component?

Angular uses CSS encapsulation. For every Angular component you write, you may define not only an HTML template, but also the CSS styles that go with that template, specifying any selectors, rules, and media queries that you need. One way to do this is to set the styles property in the component metadata.

The styles specified in @Component metadata apply only within the template of that component.

They are not inherited by any components nested within the template nor by any content projected into the component. Read everything about it on: https://angular.io/guide/component-styles

---

Related Topics