What is the best way to link styleUrls to a CSS file located in a different directory?

I am trying to include the CSS file 

src/app/shared/layouts/admin/admin.component.css
in my component located at 
src/app/admin/create-company/create-company.component.ts

How can I properly reference this css file in the styleUrls of create-company.component.ts?

Attempts made so far:

src/app/shared/layouts/admin/admin.component.css
./src/app/shared/layouts/admin/admin.component.css
../src/app/shared/layouts/admin/admin.component.css

app/shared/layouts/admin/admin.component.css
./app/shared/layouts/admin/admin.component.css
../app/shared/layouts/admin/admin.component.css

Any other suggestions would be greatly appreciated.

I have also attempted referencing the direct folder path: 

/Users/Vladimir/Workspaces/Project/coupon-system-client/src/app/shared/layouts/admin/admin.component.css

cssangularstyles

Answer №1

When dealing with relative paths, you need to backtrack to the initial shared folder that both directories have in common.

If you wish to reach admin.component.css from create-company.component.ts, the correct relative path would be:

../../../shared/layouts/admin/admin.component.css

The first shared folder is the app folder, which you access using:

../../../

Answer №2

When the CSS you want to reference is located in a different folder, you need to navigate to that specific folder using ../. Start by navigating to the app folder using ../../../, then continue navigating from there.

../../../shared/layouts/admin/admin.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

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

htmlcssangulartypescriptsass

Personalizing Twitter Bootstrap Directly from the Bootstrap Source Directory

As I work on developing a responsive web application using Twitter Bootstrap, my goal is to customize the Bootstrap framework to fit my specific needs. To do so, I have downloaded the Bootstrap source files from getbootstrap.com. My plan is to customize B ...

htmlcsstwitter-bootstrapless

Buttons for camera actions are superimposed on top of the preview of the capacitor camera

I am currently using the Capacitor CameraPreview Library to access the camera functions of the device. However, I have encountered a strange issue where the camera buttons overlap with the preview when exporting to an android device. This issue seems to on ...

angulartypescriptandroid-studioionic-frameworkcapacitor

Navigating from Page 1 to Page 2 and then returning to Page 1 using the browser's back button causes Page 1 to malfunction in NextJS version 13

I am currently using next version 13.4.5 and implementing routing with typescript through /app. On my first page, I have a <Link> (next/link) element that takes me to Page 2. However, when I use the browser back button to return to page 1, the layou ...

htmlcssreactjsnext.jsserver-side-rendering

The div smoothly descended from the top of the page to the center under the control of jQuery

I am trying to implement a feature where a div slides down from the top of the page to the center when a button is clicked. However, my current code seems to be causing the div to slide from the bottom instead of the top. Ideally, I want the div to slide ...

javascriptjquerycssslideslidetoggle

Target the CSS element with a specific class only if it is not the first child within its parent

In my coding project, I have created a div.container which contains multiple p elements. Some of these p elements have the class p.special. My goal is to select the p.special elements that are not positioned at the very top of the parent container (i.e., n ...

htmlcsscss-selectors

Tips for displaying HTML elements beyond the boundaries of an iframe

Similar Inquiry: How can content from an IFRAME overflow onto the parent frame? I am in search of a potential solution for the following issue: There is a specific element with the style "position: absolute" within a page loaded into an iframe. Based ...

htmlcssiframexhtml

Error in WebStorm: Troubleshooting HTML file issue in Angular application

I encountered an error in WebStorm while working on a new project where I was testing a form. The issue only arises when I run ng serve, although no errors are reported and the application runs smoothly. To troubleshoot, I tried deleting my node_modules f ...

angularnpmwebstorm

How to override the styling of a parent element in CSS

I'm encountering an issue with my website's sidebar. I've set the background color to yellow for elements with the currentPage class. This works fine for the 'Home' tab, but when I try to do the same for a nested tab like 'tag ...

javascripthtmlcss

Prevent display of host attributes in Angular 2

My Angular component features a title property. // Here is the code snippet for the component: @Input('title') public title: string // This is how you can use the component in your code: <dialog [title]="bar"></foo> However, when t ...

angular

Container displaying zero height due to masonry issue

Currently, I am developing a project that requires a responsive masonry layout. The container has a maximum width set to 960px, but it is supposed to adjust based on the browser's size. Each grid item has a percentage-based width (100%, 66.666666etc%, ...

jquerycssresponsive-designjquery-masonry

Loading Highcharts in Angular app

I'm currently using a highchart donut chart, but it's loading before the API response comes in. This is causing the data not to render properly. I need to retrieve the value of this.Total_connect in the highchart. Also, I want to access the val ...

angularhighcharts

What is the best way to utilize a service that has been imported using forRoot() within a feature module

Currently utilizing the package found at: https://github.com/troyanskiy/ng2-resource-rest, I am encountering difficulties when attempting to correctly import it into my feature modules. The documentation provides the following instructions: @NgModule({ ...

angular

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...

jqueryhtmlcsstoggle

Warnings about NgZone timeouts are displayed in Chrome DevTools even though the timeouts are actually executing outside of the

Is it common to receive a warning in Chrome DevTools like this? [Violation] 'setTimeout' handler took 103ms zone.js:1894 even when all timeouts are executed outside of ngzone? I personally follow this approach: this.zone.runOutsideAngular(() = ...

javascriptangulartimeoutgoogle-chrome-devtoolsangular2-changedetection

CSS styling for a container element that enables word wrapping on child divs, while also being able to stretch to accommodate the width of its children

Is it feasible to create CSS that allows an element to support word-wrap:break-word, while also adjusting its width to fit the content when breaking is not possible? <html> <style> .outer { background-color:red; word-wrap:break-wor ...

csswebkitword-break

Achieving a child div to occupy the entire available space when the parent is specified as `mx-auto` can be accomplished using Vue and Tailwind CSS

Sorry if this seems like a basic question, I'm still getting the hang of Vue and tailwind. In my parent template, it looks like this: <template> <div class="mx-auto mt-4 max-w-3xl"> <slot></slot> </div> ...

htmlcssvue.jstailwind-css

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

cssangularmaterial-ui

Showing information from Flask API utilizing Angular with underscores

I'm in the process of creating components from my Flask API. Upon accessing the route, I can view the data for the desired objects. However, upon attempting to display it on the front end through interpolation, I am only able to see certain properties ...

pythonangularflaskmarshmallow

Switching between tabs in Ionic3, the active tab transitions from displaying text to showing

I have captured a screenshot of my tabs on both iOS and Android versions. I am looking to implement a functionality where, upon clicking the last tab (tab4Root), the icon changes to show a shopping cart. tabs.html <ion-tabs color="danger"> <io ...

angularionic-frameworktabsionic3