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

What is the process for retrieving the updated document from the findOneAndUpdate function?

Utilizing MongoDB with Node.js, I installed the MongoDB module using npm install mongodb. I encountered an issue where updating an existing document did not return the updated document; instead, it returned the original one. Even after setting the returnN ...

javascriptnode.jsmongodbexpress

The dynamic drop-down menu is giving incorrect values when the onchange function is called

Trying to implement Google Analytics tracking on my dynamic dropdown menu in WordPress has been a bit tricky. I want to be able to track when users click on any of the options and display the name of the selected value, not just the ID. However, I've ...

javascriptphpjquerywordpressgoogle-analytics

Updating array properties in a JSON object using a foreach loop will automatically update all corresponding keys

Having a slight headache working on this particular issue. My aim is to construct an array of JSON objects using a foreach loop, and everything is functioning perfectly except for one property. The problematic property is actually an array that gets update ...

javascriptarraysjsonforeach

What is the process for passing a component as a parameter to a function within a different component?

Within my scenario, I have a series of components '1,2,3,...' imported into another primary component 'A'. Within component 'A', certain operations are performed and a filtered component is then returned from the list of compo ...

javascriptreactjsreact-hooksreact-reduxjsx

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

I have a table that is refreshed every 5 minutes using ajax.reload(). One of the rows in this table is labeled as CIP. My goal is to highlight the CIP row on each refresh where the value remains unchanged from the previous value (value received in the la ...

javascripthtmlajaxdatatables

Upon clicking the link, the JavaScript functionality failed to activate

When I click on a link and try to add a class, it's not working. I want to create a "modal" div. Here is the PHP/HTML code: <?php if(isset($_GET['ido'])) { ?> <div id="modal" class="modal" style="background: blue; width: 1 ...

javascriptphpjqueryhtml

Exploring Javascript through Python using Selenium WebDriver

I am currently attempting to extract the advertisements from Ask.com, which are displayed within an iframe generated by a JavaScript script hosted by Google. Upon manually navigating and inspecting the source code, I can identify the specific element I&ap ...

javascriptpythonpython-2.7seleniumweb-scraping

Tips for creating responsive Math Latex

Check out this link to my website page. Also, take a look at this other link. While using Bootstrap, I've noticed that all content is responsive except for the equations in the first link and the Matrix multiplication example in the second link towar ...

csstwitter-bootstrapresponsive-designlatex

The Ng-zorro popover automatically closes when it is displayed on hover, and then you hover over the dropdown menu of a select component

Link for Reproduction https://stackblitz.com/edit/angular-tru7hd-xqtrkw?file=src%2Fapp%2Fapp.component.ts,src%2Findex.html Instructions to Reproduce Hover over the button Click on the selection List item List item Hover over one of the choices Expecte ...

angularselectantdpopoverng-zorro-antd

Error rendering {message} object on the Chrome Console

In my ReactJS component, I am utilizing the {message} parameter from props. Check out the code snippet below: import React from "react"; const MyMessage = ({ message }) => { if (message?.attachments?.length > 0) { return ( < ...

javascriptreactjsjsongoogle-chrome

How can I download a PDF file in React.js using TypeScript on Next.js?

I've created a component to download a PDF file. The PDF file is named resumeroshan.pdf and it's located inside the Assets folder. "use client"; import resume from "/../../Assets/resumeroshan.pdf"; export default function Abo ...

javascriptnode.jsreactjsfilenext.js

Troubleshooting techniques for resolving CSS issues with the video.js package in ReactJS

When using video.js in react to build a video player, I encountered an issue with the npm package not providing its inbuilt CSS. How can I add the inbuilt CSS of video.js? Instead of the control bar, I am getting something different than what is shown in t ...

cssreactjs

Ordering an Array of JavaScript Objects in a Custom Sequence (utilizing pre-existing methods)

Imagine we have an array of objects: ["c", "a", "b", "d"] Is there a way in ECMAScript or through a third-party JavaScript library to rearrange the objects in the first array to match the order specified by the second array, all within one line or functi ...

javascriptjqueryarrayssortingunderscore.js

What is the most effective approach to scan Angular 2, 4, 5 template html files before AOT compilation for optimal code quality assessment?

Recently, I stumbled upon an interesting GitHub repository called "gulp html angular validate". If you're not familiar with it, you can check it out here. However, I have doubts about whether this tool is suitable for Angular 2+ projects. Additionall ...

angulartypescriptangular2-templatelinttslint

Converting an object of objects into an associative array using Javascript and JSON

Using AngularJS, I am sending this data to my API : $http.post('/api/test', { credits: { value:"100", action:"test" } }); Upon receiving the data in my nodeJS (+Express) backend, it appears as follows : https://i.stack.imgur.com/NurHp.png Why ...

javascriptjsonangularjsnode.jsexpress

Preventing default behavior in a JQuery post request

Encountering an issue with jQuery functionality on a mobile device. function send() { $.post("scripts/post.php", { username: $("input[name=username]").val(), password: $("input[name=password]").val() }, function(data) { if ($(".data div" ...

javascriptjqueryhtmlpostinput

Filtering an observable using criteria from another source

I'm currently facing a challenge where I need to map observables by filtering them based on events emitted from other observables. The main question at hand is: Is there a way to pass a property of an event to a filter function? In the following exa ...

angularstreamrxjsfilteringobservable

Does the Angular library "ngx-paypal" have the capability to process recurring payments?

For my Angular project, I am interested in utilizing the paypal library ngx-paypal. While I have experience with integrating javascript libraries, I specifically want to incorporate an Angular library such as https://www.npmjs.com/package/ngx-paypal Does ...

angularpaypalpaypal-sandboxpaypal-subscriptions

When I specify the type for the function parameter, an error occurs when I attempt to execute the function

When I assign a generic type to the function parameter and try to call the function, an error message pops up stating "This expression is not callable. Type unknown has no call signature." function a() { return 'abc' } function fun<T>(x: T ...

javascripttypescripttypescript-generics

Opening a modal in Angular2+ when selecting an item from ngx-chips (tag-input)

I need to implement a functionality where clicking on a tag in a dropdown should trigger the opening of a modal window in my Angular application. Below is the code snippet related to this feature: <div class="force-to-the-bottom"> <tag-input [ ...

angulartypescriptmodal-dialogngx-chips