Having trouble incorporating an external CSS stylesheet into my Angular 9 project

I'm a beginner to Angular and I wanted to incorporate W3 CSS into my project. Here are the steps I took:

  1. Installed W3 CSS using npm in my project directory by running: npm install --save w3-css
  2. Added node_modules/w3-css/w3.css to angular.json
"styles": [
          "src/styles.css",
          "node_modules/w3-css/w3.css"
        ],

After completing these steps, I attempted to apply the css classes to my component's html file.

<div class="w3-container w3-border w3-large">
    <div class="w3-left-align"><p>Left aligned text.</p></div>
    <div class="w3-right-align"><p>Right aligned text.</p></div>
</div>

However, I did not see any of the classes being applied.

Keep in mind that the node_modules folder and angular.json should be in the same directory for this setup to work properly.

cssangularw3-css

Answer №1

Ensure to include your CSS by importing it in the style.css document.

@import "../node_modules/w3-css/w3.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

Exploring subobjects while fetching observables (typescript/angular)

When retrieving JSON from an API into an Angular service, I am working with a collection of objects structured like this: { "data": { "id": 1, "title": "one" }, "stats" : { "voteCount": 8 } } I am particularly interested in the ' ...

jsonangulartypescript

Pause the contact form functionalities with a background CSS animation utilizing keyframes

I am attempting to create a submission form using bootstrap + wp with an animated background using only css. The animation is functioning properly, but when I place the form within the same div container, it does not work at all. I have tried adjusting the ...

htmlcssformscss-animations

Error loading res.render in Angular Universal Server Side Rendering (SSR)

I'm having trouble implementing SSR on my website as the content is not loading. I've set up Angular Universal and followed this guide for the initial configuration. However, when I access http://localhost:4200/, it never finishes loading and no ...

node.jsangularexpressserver-side-rendering

"Encountered an undefined ViewChild error when using Material Angular MatSidenav

Struggling with Material and angular here! Trying to toggle the Sidenav from a different component using viewchild but running into issues with undefined elements. Here's what I have so far: sidenav.component.html <mat-sidenav-container class="ex ...

javascriptangularangular-material

Tips for creating a unified user interface framework for various web applications sharing a consistent design

Struggling to create a user interface framework for multiple web applications, I'm faced with the challenge of setting up the infrastructure in our unique situation: We have 7 (or more) different web applications built using asp.net mvc Some of thes ...

javascriptasp.netcssframeworkscdn

What could be preventing this bootstrap carousel slider from transitioning smoothly?

I've created a CodePen with what I thought was a functional slider, but for some reason, the JavaScript isn't working. The setup includes bootstrap.css, jquery.js, and bootstrap.js. I'm having trouble pinpointing what's missing that&apo ...

javascriptjquerycsstwitter-bootstrapcarousel

Error message "The result of this line of code is [object Object] when

Recently, I encountered an issue while retrieving an object named userInfo from localStorage in my Angular application. Despite successfully storing the data with localStorage.setItem(), I faced a problem when attempting to retrieve it using localStorage.g ...

javascriptangulartypescriptlocal-storageangular-local-storage

Why does the sticky navbar not display anything on localhost:4200 in Angular, but works perfectly when placed in a regular HTML file?

I'm encountering an issue while trying to create a webpage in Angular 6. The content displays correctly when I write the code in NOTEPAD as normal HTML, but it doesn't work as expected when implemented in Angular. I am new to Angular and struggli ...

htmlcssangularbootstrap-4navbar

Angular 11 component encountering issues with accessing server-side data

Recently, I encountered an issue when trying to connect the PHP API with the Angular service to retrieve data from the database. I am uncertain whether the problem lies within the service, the component.ts file, or the HTML section. Therefore, I have share ...

htmlcssangulartypescript

If the width is below 767, the previous code will not be effective in jQuery

Challenge: How can I ensure that the code within the if statement only executes when the screen width exceeds 767px, and does not work if it is less than 767px? Using jQuery: $(document).ready(function() { $(window).resize(function() { if ($( ...

javascriptjquerycss

Having trouble getting TinyMCE to work properly with Angular 8 integration

I'm currently working on integrating tinymce into my Angular 8 application and encountering the following error in the VS Code console: ERROR in node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(8,9): error TS1086: An accessor cannot ...

angulartinymce

I'm experiencing issues with my custom CSS file conflicting with Bootstrap

It's strange, my custom main.css doesn't seem to have any effect on changing the font size or location of the text. However, as soon as I remove the line that links to bootstrap, it starts working perfectly. I believe that the bootstrap.css file ...

htmlcsstwitter-bootstrap

Position the mat-icon button in the top right corner for the close button

I'm struggling with positioning my close icon button at the top right corner of my dialog box. Here is my app-iconbutton component: <button mat-icon-button class="iconbutton" [ngStyle]="{ 'background-color': back ...

cssangularangular-materialangular13

What is the reason behind Angular 6 producing my service inside the directory "e2e/app"?

When creating a new service in Angular 6 using the command: ng generate service <service-name> angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "t ...

angularangular-cli

I am facing issues with Angular's @ContentChild and unable to make it work

Having some trouble grasping the concepts of Angular2, specifically with the @ContentChild feature not working as expected. I must be making a simple mistake somewhere, but I just can't seem to find it. Any assistance would be greatly appreciated. ap ...

angular

Automatically insert a page break after every set of n items to make printing easier

When printing a web page with a list of items, sometimes the items end up appearing garbled across multiple pages. Is there a method to add a CSS class definition after a certain number of items have been added on a page? The CSS in question would be asso ...

.nethtmlcssprintingrepeater

Bidirectional linking and verification of a dropdown menu in Angular 2

I am attempting to implement two-way binding in Angular using a dropdown list. I also need the form to be considered invalid if no value is selected. See below for my code: <form class="form-horizontal" (ngSubmit)="submit(frm)" #frm ...

angular

Angular: Updating image tag to display asynchronous data

Utilizing Angular to retrieve user profile pictures from the backend, specifically Node.js/Express, has been mostly successful. However, there is one issue that I have encountered. The HTML displaying the profile picture does not re-render when the user up ...

htmlangulartypescript

Why is the CSS functioning on JSFiddle but not on my local machine or remote website?

One of the issues I am facing with my website is related to the css menu. The dropdown items are visible, but when attempting to click on them, the dropdown closes immediately. Interestingly, the navigation functions properly on JSFiddle here. However, t ...

htmlcssjsfiddle

The dropdown feature functions properly on Chrome but seems to be malfunctioning on

Dropdown list inside the HTML header table My query was addressed in the link above, however, the solution only seemed to work on Chrome and not Firefox. I specifically want the dropdown arrow header to be displayed next to the table header instead of bel ...

htmlcssbootstrap-4