Contrasting importing CSS directly in index.html versus using styleUrls in Angular 5

My landing page and dashboard components have different CSS styling, causing one of them to not function properly depending on the CSS. I tried removing these two lines from index.html:

  <link href="./assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="./assets/css/paper-dashboard.css" rel="stylesheet"/>

Then, in angular.cli, I adjusted the styles array as follows:

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "assets/sass/paper-kit.scss",
        "assets/css/demo.css",
        "assets/css/nucleo-icons.css"
      ]

After making these changes, my landing page component worked properly but the dashboard did not. However, when I added back the two lines to index.html and updated angular.cli like this:

"styles": [
        "styles.css"
      ]

The landing page stopped working correctly while the dashboard began functioning correctly. I specified the styleUrls like this in my code, but they were not being applied correctly. Does anyone know how I can resolve this issue so that both components work properly? Should I set CSS for each component separately?

@Component({
  selector: 'dashboard-cmp',
  moduleId: module.id,
  templateUrl: 'dashboard.component.html',
  styleUrls: [
    '../../assets/css/paper-dashboard.css',
    '../../assets/css/bootstrap.min.css'
  ]
})

UPDATE

I noticed that when the angular.cli styles are configured like this:

  "styles": [
    "styles.css",
    "assets/css/bootstrap.min.css",
    "assets/sass/paper-kit.scss",
    "assets/css/demo.css",
    "assets/css/nucleo-icons.css",
    "assets/css/paper-dashboard.css"
  ]

The dashboard component works properly, but the landing page does not. When I change the styles configuration to:

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "assets/sass/paper-kit.scss",
    "assets/css/demo.css",
    "assets/css/nucleo-icons.css",
    "assets/css/paper-dashboard.css"
  ]

The landing page starts working correctly, but the dashboard stops functioning. I attempted setting styleUrls like this in dashboard.component.ts: ['./dashboard.component.css'], and adding 

@import url('/../../assets/css/bootstrap.min.css');
in dashboard.component.css, but the issue persists. Any suggestions on what might be causing this?

cssangulartypescriptbootstrap-4angular5

Answer №1

Think of components as mini universes within the larger universe of your project. Just as you can customize your own room without affecting the overall look of the house, components allow you to make specific changes without impacting the entire web page. If you want to stick with the same design as the rest of the site, work on the main file. But if you're feeling creative and want to experiment, focus on individual components.

Answer №2

When working with Angular, there are two scopes for CSS: global and component scope. Global CSS is applied throughout the entire application, affecting all components. To include global CSS, you can either add it to the index.html file or register it in the styles section of the .angular-cli.json file.

For example, in the angular-cli.json file:

"styles": [
     "styles.css",
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],

CSS styles defined within the @Component metadata apply only within the template of that specific component.

For instance, in a Component:

styleUrls: [
    './paper-dashboard.css'
  ]

More information on component styles in Angular can be found at https://angular.io/guide/component-styles

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to ensure that a div's height matches its width

Is there a way to make three divs, each with the CSS property display:inline-block, have a 1:1 ratio of width to height using only CSS? Currently, the width is set to 30% and the height to 75%, causing the width to be greater than the height. #our_servi ...

htmlcss

Troubleshooting issue with CSS code for table scrolling functionality

I have created an HTML page with a table that gets data from a database. I am trying to limit the size of the table by placing it inside a div like this: <div id="scrollablebody"> <table class="clientTable"> <thead> <tr ...

htmlcss

Writing a CSV file to AWS S3 proves to be unsuccessful

I have been working with TypeScript code that successfully writes a CSV file to AWS S3 when running locally. However, I have recently encountered an error message: s3 upload error unsupported body payload object NOTES: The code is not passing creden ...

javascriptnode.jstypescriptamazon-web-servicesamazon-s3

Instead of simply displaying the pages of the PDF file, 'react-pdf' inserts HTML content after each page

A new component was created: import React from 'react'; import { Document, Page, pdfjs } from 'react-pdf'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/aj ...

reactjstypescriptreact-pdf

Angular's asynchronous HTTP request allows for non-blocking operations when

I'm currently working with Angular 6, and I've encountered an issue while updating my resource instance in the following way: this.user = api.getUser(); public getUser(): User { const myHeader = new HttpHeaders({ 'Authorization' ...

javascriptnode.jsangular

Detecting Changes and Handling Events Beyond Angular's Scope

After setting up my Angular 7 Application, I integrated a large external library successfully. The only issue I encountered was with an event from this external source. An event listener in the external source triggers and sends data to my Angular App. e ...

angularrxjs

What is the reason behind the immediate firing of the animate callback function when a CSS transition is present?

I am facing an issue where the callback function fires immediately, disregarding the linear ease type and defaulting to the swing ease in CSS transitions. Is there a way to ensure that the animate function works correctly with the transition? The reason fo ...

jquerycssjquery-animatecss-transitions

Uh-oh! You can't configure Next.js using 'next.config.ts'. You'll need to switch it out for 'next.config.js'

I've encountered an issue while working on my TypeScript project with Next.js. Initially, I named my config file as next.config.js, but it resulted in a warning in the tsconfig.json file stating "next.config.ts not found," leading to a warning sign on ...

typescriptnext.jsserver-side-rendering

The HTML image link is adorned with a tiny blue checkmark underneath

My a tag with an image inside seems to be extending below the image, resulting in a small blue tic mark on the bottom right side. I've attempted different CSS solutions such as setting border to none, but nothing has resolved the issue. Any assistance ...

htmlcss

OpenID Connect does not provide confirmation when handling user logouts

We have integrated the angular-oauth2-oidc plugin into our system. Specifically, we are using: angular 13 angular-oauth2-oidc 13.0.1 Our OAuth IDP is WSO2 Identity Server, and here is a sample of the discovery service implemented by WSO2 IS: { // ...

angularopenid-connectangular-oauth2-oidc

Varying levels of scaling on iPhone and iPad

I am currently working on a website project for my friend's brother and everything is running smoothly (for the most part). The layout of the site is designed with a centered container, leaving approximately 15-20% space from the left side. However, ...

phpiphonecssipad

Initializing variables in Angular2 templates

I am facing an issue where, upon running the application, the console displays all the logs from the ngOnInit function, but the actual view only shows a skeleton without the component variables and text from l18n. It seems like the ngOnInit is not working ...

typescriptangular

Element with adhesive properties alters its color at a particular location

I need the sticky element to change colors at specific points and then revert back to its original color. The color should be orange initially, green on block 2, and orange again on block 3. For the complete code and to address any issues with jQuery, pl ...

javascripthtmljquerycss

Anticipated request for spy navigation with path '/members' was expected, but unfortunately was not triggered

I am facing an issue with a service method that performs an HTTP delete operation. The expected behavior is that upon successful deletion, the page should be redirected to another location. However, during testing, I noticed that the router navigation func ...

javascriptangulartypescriptunit-testingkarma-jasmine

What's the deal with default exports in TypeScript?

I attempted to search for a solution to this issue but was unable to find one. I am currently trying to achieve the following: import { Variables } from './types'; export default: Variables = { type: 'set_variables', variables: { ...

javascripttypescriptexport

Issue with Angular 6: Unable to locate identifier 'require' while trying to request xml2json node

Recently delving into Angular, I've been exploring the installed node modules and how to use them in a data.service.ts file. Everything below executes flawlessly! var isWindows = require('is-windows'); console.log("Is this windows? " + isWi ...

angular

How do I go about aligning the first row to the center vertically?

When I use the align-items-center class in the row section, it just doesn't seem to work as expected: <div class="container"> <div class="row align-items-center"> <div class="col-12 bg-warning"> hello ...

htmlcssbootstrap-4

When working with an observable in an Angular Material table, the *ngIf directive may not function as expected

Attempting to utilize an Angular Material table with expandable rows, specifically to display information based on screen width reaching a particular breakpoint. Utilizing an observable isHandSetPortrait$ that is subscribed to in the HTML to determine if t ...

angularangular-material

The alignment of an inline unordered list is off-center

My website at this link features a sticky navigation bar. However, the list items are slightly misaligned to the left and I'm struggling to pinpoint the cause. Despite adjusting margins and padding extensively, the issue persists. It's important ...

htmlcsstwitter-bootstrapnav

Stopping the subscription to an observable within the component while adjusting parameters dynamically

FILTER SERVICE - implementation for basic data filtering using observables import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { Filter } from '../../models/filter.model'; imp ...

angulartypescriptrxjs