Delayed loading of CSS within app-root component in Angular

Currently, I am working on integrating an animation when the app starts within the contents of 

<app-root>...</app-root>
. To achieve this, I have made the following changes:

<app-root>
    <style>
      h1 {
        font-family: 'Calibre Medium';
        color: black;
        font-size: 2rem;
        margin: 0;
        letter-spacing: 1px;
      }
    </style>

    <h1>Test</h1>

</app-root>

The content is displayed as intended, however, there seems to be a delay in loading its CSS. This results in the initial display having a different font style which then corrects itself after approximately 1 second.

Is there any way to optimize this loading process or are there alternative methods to achieving this desired behavior?

EDIT: Previously attempted to load the styles within the document's head and used style.css but encountered no noticeable difference.

EDIT: Wondering if the use of bootstrap could potentially be causing this issue?

htmlcssangular

Answer №1

Curious... why are the style tags placed inside the app-root element? Is this a necessary requirement? If not, consider trying a different approach:

<head>
    //...
  <style>
    #my-beautiful-loader {
      font-family: 'Calibre Medium';
      color: black;
      font-size: 2rem;
      margin: 0;
      letter-spacing: 1px;
    }
  </style>
</head>

//...
<app-root>

    <h1 id="my-beautiful-loader">Test</h1>

</app-root>

By following this method, the css will be loaded before displaying your h1 tag.

For additional reference, check out this StackBlitz example.

Answer №2

If you're working with Angular and need to incorporate global styles, simply insert them into your angular.json file.

src/styles.css

@font-face {
  font-family: Calibre Medium;
  src: url(/* path to your fonts file */) format(/* fonts file format */);
}

h1 {
  font-family: 'Calibre Medium';
  color: black;
  font-size: 2rem;
  margin: 0;
  letter-spacing: 1px;
}

For different options regarding the src format for font-face, check out this link.

angular.json

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

By following these steps, your CSS will be loaded when your application launches, similar to adding <link> or <style> tags in your index.html. (More details available here)

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

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

Jquery CSS malfunctioning on Post's div element

After retrieving a div using jquery's post method on my page, I am encountering an issue when attempting to apply CSS to the divs. Strangely enough, applying CSS with jquery to divs that are already present on the page works perfectly fine. Javascrip ...

jquerycss

Angular2 Auth Guard causing empty page display when Observable.of(true) is used

While using auth-guard to protect certain routes, I'm encountering an issue where a blank page is displayed when attempting to retrieve a refresh token. The authenticated() method returns an Observable and the code seems to be functioning correctly wi ...

angularangular2-routing

What is the best way to position my content next to my sticky sidebar for optimal visibility?

Just starting out with coding and tackling my initial project using reactJs and bootstrap 5. My aim is to create a sticky side navbar that remains fixed on the side while my content displays next to it, even when navigating through different routes. Unfort ...

javascriptcssreactjsreact-bootstrapbootstrap-5

Halting the execution of a jQuery function when a condition is true

Currently in the process of building a website for my new brand, I am faced with a challenge while working with jQuery for the first time. Specifically, I am encountering issues related to the state of a specific div. The code contains if statements that ...

javascriptjqueryhtml

Resetting several sticky titles after displaying and hiding elements

Inspired by a popular codepen example, I have successfully implemented sticky titles in my sidebar. However, when integrating these sticky titles with the functionality to show/hide related items on click, I encountered some unexpected issues. The code sni ...

javascriptjqueryhtmlcsssticky

Signal for a complete 360 degree rotation of an image

Looking to enhance my 360 image rotator with an indicator that fades out after the first image. I added this function to the end of my 360.js: (function(){ if( $('#first').css('visibility','hidden')) { $('#rotat ...

javascriptjqueryhtmlcss

What are some tips for customizing the NavBar Bootstrap 4 Layout to fit a unique design?

Good evening everyone, I am currently working on a website project for a client who has provided me with specific requirements for the Navbar design. While it seemed straightforward at first, I have spent several hours trying to perfect the layout. I am ...

htmlcsstwitter-bootstraprazorbootstrap-4

Display the name of the link on the console

I am working on an HTML list that contains some links: <ul> <li><a href="#" name="link1">link1</a></li> <li><a href="#" name="link2">link2</a></li> <li><a href="#" name="link3">link3& ...

javascripthtmlnode.js

Maintain the expanded menu even after selecting a sub-item using jQuery

After conducting a thorough search, I was unable to find exactly what I needed. I have successfully implemented cookies on my menu so that when the page is reloaded, it remembers which menus were open. However, I noticed that clicking on a sub-item of Hy ...

javascriptjqueryhtmlcss

Steps for synchronously making multiple http calls at various levels in Angular 2 using RxJS

Currently, I am facing a challenge in Angular 2 where I need to make multiple HTTP calls synchronously at different levels using RxJS. Specifically, I have a resolver service that handles 5 API calls - a, b, c, d, and e. The order of execution I require i ...

angularrxjsangular-httpclient

Retrieve the selected date from the date picker widget

Welcome to my custom datepicker! Here is the HTML code: <div class="field-birthday field-return" id="birthday-edit" style="display:none;"> <div class="birthdaypicker"></div> <input class="hidden" name="birthday" type="hidden" ...

javascriptjqueryhtmldatepicker

Unable to render Angular charts

Recently, I've been attempting to integrate angular charts using the chart.js bundle sourced from CDN links. The version of Angular being used is 1.5.7 and for chart.js it's 2.1.6. I encountered the following error message: angular.js:13708 T ...

javascripthtmlangularjschartsangular-chart

Adjust the spacing between the title and other elements in an R Shiny application

How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...

cssrshiny

Ways to verify that the Google Analytics code is functioning properly within an Angular 2 application

I'm just getting started with Google Analytics and I'm attempting to integrate it into my Angular 2 project. Here's how I've set it up: app.component.ts import { Component } from '@angular/core'; import {Router, NavigationEn ...

angulargoogle-analytics

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...

javascriptcssanimation

Scroll on sidebar that overflows, rather than the page behind

My goal is to have a fixed background page while allowing the sidebar to scroll independently. Both elements are too large for the screen, so I want the page to scroll normally until the navbar overflows in height and becomes scrollable. Check out the exam ...

htmlcss

Creating a website layout suited for printing using CSS

One of my clients has a website that needs to be converted into a brochure format. When he prints the website, it must be printed on paper with a specific layout. Some sections need to be removed and others modified. I have utilized Bootstrap 4 and create ...

cssbootstrap-4mediaprint-css

Tips for implementing a custom filter in an AngularJS JavaScript controller

Can anyone help me with creating a custom filter in an AngularJS JavaScript controller? I need to be able to search for items in an array called segments by their SegmentId. The filter should iterate through the segments array and return the segment that ...

javascripthtmlangularjsangularjs-filter

Webkit causing complications with straightforward CSS3 animation

I'm currently working on a website and you can check it out here: Unfortunately, I've encountered an issue where the animations aren't triggering specifically on webkit browsers like Chrome and Safari: @-webkit-keyframes slideright{ 0% {tr ...

cssanimationwebkit