A guide to incorporating external CSS files in Angular 5 components using styleUrls

I have a unique setup where my Angular 5 application resides in a subdirectory within another parent application.

The parent application consists of JSP and other AngularJS applications among other things.

My goal is to include a CSS file from the parent application into a specific component of the Angular 5 application.

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: [....] //Here
})

Is this achievable?

I have checked out a similar question on Stackoverflow about loading external CSS styles into an Angular 2 Component, but it doesn't quite fit my situation.

Thank you for any assistance provided.

javascriptcssangularangular-cliangular-components

Answer №1

Here are some steps you can take:

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['my-form.css']
})

Your stylesheet should be named as SCSS file: myform.scss.

To import an external CSS file, follow this syntax:

@import "my-external-stylesheet.css"; // include this at the top of `my-form.scss`

Answer №2

When configuring your child application in the .angular-cli.json file, make sure to locate the styles property for your app. Insert the path to your parent CSS file within this section.

Below is an illustration of how the JSON configuration may look:

 "apps": [
    {
      "styles": [
        "../../../../apec-template-bootstrap-responsive/src/main/resources/css/old-apec.css",
        "styles.css"
      ],
    }
  ],

By following these steps, you can easily apply the desired parent styles to your child application.

Answer №3

It is possible to use the default styleUrls:

styleUrls: './my-form.component.css'

In your specific my-form.component.css file, you have the flexibility to import any additional CSS files:

@import ".../component.css";

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

Tips for properly removing Bootstrap 4 tooltips when deleting their corresponding DOM element using html()

In my Bootstrap 4 project, I've implemented a live search box that displays results with tooltips for longer descriptions. I've written jQuery scripts to hide the search results and their parent div when certain events occur, like clearing the se ...

javascriptjquerybootstrap-4

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

javascriptphpjqueryhtmlajax

Instructions for inserting an anchor tag into the middle of a <p> element utilizing document.createElement("p")

When generating elements dynamically with JavaScript using document.createElement("p"), I am looking to create a paragraph element <p></p> that includes an anchor tag in the middle, creating a clickable link within the text. I aim to use JavaS ...

javascripthtml

The NGX countdown timer is experiencing a discrepancy when the 'leftTime' parameter exceeds 24 hours, causing it to not count down accurately

When the leftTime configuration exceeds 864000, the timer does not start from a value greater than 24 hours. <countdown [config]="{leftTime: `864000`}"></countdown> For example: 1. When leftTime is set to `864000`, the Timer counts down from ...

javascriptangularnpmcountdown

What is the correct way to execute a jQuery trigger on a checkbox or radio button to simulate a user clicking on it?

My current page utilizes can.js, making it challenging to replicate the issue on jsfiddle.net. The result I am experiencing is as follows: When I click on a checkbox (or even a radio button), an input text box should update accordingly (for example, displ ...

javascriptjquery

Is incorporating RequireJS into an AngularJS project a valuable decision?

Is it true that AngularJS has its own module loading mechanism built-in and using RequireJS is unnecessary or even inefficient? I am working on an Angular project where the index.html file is becoming quite large. Would incorporating RequireJS help reduc ...

javascriptangularjsperformancerequirejsjs-amd

Is there a way to display icons alongside each option in the dropdown menu?

I have a dropdown icon (pumpkin 1) div that is causing spacing issues with the other icons on the page. The problem is that it has a dropdown functionality which needs to overlay the text at the bottom. I want to display all icons next to each other (1,2, ...

css

sending properties to dynamically loaded components

I'm struggling with transferring props between children and parent components using Vue Routes. Within my Layout component, I have a wrapper DIV structured like this: <template> <div class="container" v-bind:class="cssClass ...

javascriptvue.jsvuejs2vue-router

Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presen ...

htmlcssreactjs

Fetching data from one component to load an Angular component

Essentially, I have a grid within Ionic that dynamically populates its rows using ngFor. Each row contains an ionic button labeled "View details" which, when clicked, should display all the data associated with that specific object. Imagine it as a preview ...

angularionic-frameworkionic4angular8

Attempting to replicate the flipping motion of a card by applying the transform property to rotate a div element, ultimately revealing a different

I am attempting to create a series of divs that simulate the flipping action of a notecard. Unfortunately, when I hover over the div, it turns white because I have set the display property to none. I am unsure how to make the other div (.back) visible. Y ...

htmlcss

Encountering an issue with my node configuration while working on a Discord bot

Attempting to develop my own Discord Bot has presented me with a challenging error that I am struggling to resolve: internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module './commands/${file}' Require stack: - C:\Users&bso ...

javascriptnode.jsdiscord.js

I'm looking for a way to have an element shift in a particular direction only when two keys are pressed simultaneously

Having trouble moving a square diagonally when two keys are pressed simultaneously. Trying to create an if statement that detects both key presses at the same time and triggers the movement. However, all attempts have failed so far, leaving uncertainty abo ...

javascriptcss

What is the reason that setState functions properly when parsing each key separately, but fails when passed as an object?

Currently, I am delving into the world of React and TypeScript, but I have encountered a problem when trying to pass an object with a specific type in order to update the state. For some reason, the state remains unchanged. My approach involves using the ...

javascriptreactjstypescript

Tips on avoiding a page reload following a form submission using JQuery

Currently developing a website for my app development project, I've encountered an unusual issue. Utilizing some JQuery to transfer form data to a php page called 'process.php' and then add it to my database. The strange part is that the pa ...

javascriptphpjqueryhtmlforms

Creating nested directories in Node.js

I am attempting to accomplish the following task Create a function (in any programming language) that takes one parameter (depth) to generate folders and files as described below: At depth 0, create a folder named 0, and inside it, create a file with its ...

javascriptnode.jsfilesystems

Are there any other ways to write code in a Functional style within Angular?

From what I understand, there are several types of Angular v17 code that can be implemented in a Functional way: Functional HTTP Interceptors Functional Route Guards Functional Validator (Reactive forms) I'm interested to know if there are any addit ...

angular

The column headers in the Kendo grid fail to resize proportionally

The column headers in the Kendo grid do not scale correctly when the browser has a large or small resolution. This issue can be easily reproduced by zooming in or out on the browser. Refer to the image below for an example. Is this a known bug, and are th ...

csskendo-uitelerikkendo-grid

Bidirectional data binding in angular 12 reactive forms

After working with angular for a while, I encountered an issue while trying to implement two-way binding. The code snippet below is where I'm facing difficulty. Since the use of [(ngModel)] has been deprecated in Angular 12 within formGroup, finding ...

javascriptangulartypescriptformsangular12

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

css