The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different.

Here is what the example looks like on the project website:

https://i.sstatic.net/ESP42.png

To debug the issue, I created a blank Angular app and included Angular Material along with just the toolbar component. Surprisingly, it displayed the same way as in my actual project, shown here: here

https://i.sstatic.net/zCLNG.png

Below is the HTML and CSS code from the example that works correctly:

I have replicated it on StackBlitz here

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<div class="mat-app-background basic-container">
  <toolbar-basic-example>loading</toolbar-basic-example>
</div>
<span class="version-info">Current build: 10.2.0</span>

component html

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

style.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}

component css

.example-spacer {
  flex: 1 1 auto;
}

This is my debugging Angular app, which I want to resemble the example. You can view and edit it on StackBlitz here

index.html

<!doctype html>
<html lang="en">
<head>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
</head>
<body class="mat-typography">
  <div class="mat-app-background basic-container">    
  <app-root></app-root>
  </div>
</body>
</html>

component html

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

styles.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}

component scss

.example-spacer {
  flex: 1 1 auto;
}

What are the reasons why my Angular app does not resemble the example from the Angular Material website, and how can I correct it to achieve the desired outcome?

cssangularsassangular-material

Answer №1

The mat-icon-button directive is not functioning because you have not imported MatButtonModule.

Here is an updated version of app.module.ts with the necessary import:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';

import {MatButtonModule} from '@angular/material/button';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatIconModule,

    // don't forget to include this
    MatButtonModule,

    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Check out the working stackblitz example here: https://stackblitz.com/edit/github-9eywwc-xsjtpo?file=src/app/app.module.ts

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

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...

htmlcss

Displaying a single item per click using jQuery

Hey there, I have a small issue with some HTML divs and show/hide functionality. I'm trying to make it so that only one div is shown per click, but my current jQuery code is showing all the divs at once. Any suggestions on how to fix this? Check ou ...

jquerycss

Error message: Issue with AWS Serverless Lambda and Angular - TypeError: express function not defined

I'm encountering an issue when trying to deploy my application from localhost:4200 to AWS serverless Lambda. The error in cloudwatch logs is causing a 500 {"message": "Internal server error"} response when I access the URL. My understanding of AWS is ...

angulartypescriptamazon-web-servicesaws-lambdaaws-serverless

Struggling to properly test the functionality of my NgForm call in Angular2+

I've been trying to test the login functionality by inputting username and password in an NgForm, but I keep encountering unsuccessful attempts. Is there a vital step that I may be overlooking? Currently, I'm facing this error message: Chrome 6 ...

javascriptangulartypescriptangularjs-ng-form

The window fails to retain the scroll position when overflow is enabled

Whenever I click on a specific div, I use jQuery to dynamically apply overflow: hidden to the html and body. $(".mydiv").on("click", function() { $("html, body").css("overflow", "hidden"); }); However, this action causes the window to scroll to the to ...

javascriptjqueryhtmlcss

Removing a column in an Angular application using the xlsx library

I'm trying to figure out how to remove the last column from a table when using the xlsx library. I'm working on saving data from my Angular application, but there is one column called "description" which just contains icons and I don't want ...

angularangular6angular7xlsxsheetjs

Adding a new line in the configurations of MatDialogConfig (Angular)

Here is a code snippet: private mDialog: MatDialog, const dialog = new MatDialogConfig(); msg = "I enjoy coding in Angular.\r\n I am learning TypeScript." dialog.data = { message:msg }; alert (msg); mDialog.open(AB ...

angulartypescript

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

Angular is incorrectly updating all fields at once instead of updating only the intended one field

I am facing an issue with my *ngFor loop where I am attempting to update a number field on click, but it ends up updating all the items with the same value. Here is a snippet of my HTML: <form *ngFor="let product of products" [formGroup]=&quo ...

angular

Angular 4: The process of fetching the URL before the previous one

Upon clicking the /getEmployees URL, the EmployeesComponent will be triggered to show the employee list. If I were to click on a specific employee, say N, the EmployeeComponent would then launch. However, I am interested in finding a way to retrieve the o ...

angular

Unable to accommodate additional space, InputGroup is not utilizing the

Using react-bootstrap in my project, I have a component with the following code. I want the input and button to display together and fill up the entire space allocated by the Col. Although the input and button are displaying side by side, they are not ta ...

csstwitter-bootstrapreactjsreact-bootstrap

Prevent the text within the textarea from wrapping onto the next line

My challenge involves a textarea where text overflows onto the next line when it exceeds the maximum characters. However, I want the text to continue on the same line with a scroll bar for better visibility. Here's an illustration: text here flows on ...

htmlcss

Data has not been loaded into the Angular NGX Datatable

As a beginner in Angular, I am struggling to set data from the module. ngOnInit() { this.populate(); } public populate() { this.productService.getAllProduct('6f453f89-274d-4462-9e4b-c42ae60344e4').subscribe(prod => { this. ...

angulartypescriptngx-datatable

Add a touch of mystery to a triangle SVG with CSS shadows

Is there a way to apply shadows to SVG images, like a triangle? I've tried using polyfill solutions but they didn't give me the desired effect. Check out this JSFiddle where I showcase what I'm trying to achieve. This is my HTML: <div c ...

javascripthtmlcss

How can one determine the most accurate box-shadow values?

I am trying to extract the precise box-shadow parameters from a CSS style rule generated by the server. My main focus is determining whether the element actually displays a visible shadow or not. There are instances where the shadow rule is set as somethi ...

javascriptcss

Resolve Conflict Between Chrome Debugger and Node App in Visual Studio Code

My current configuration in the launch.json file within Visual Studio Code looks like this: { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Progra ...

node.jsangularexpressvisual-studio-code

What is the best way to position an image in the center over a video using HTML and CSS?

I am currently developing a website with a background video and I want to overlay a company logo on top of it while keeping it centered. My coding language of choice for this project is using HTML and CSS. Here's the HTML code snippet I have for this ...

htmlcss

Tips for accessing information from a FOR loop within DIV tags

Let's explore the following code snippet: Here is the HTML generated: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Website ...

javascripthtmlcssvue.jsvuejs2

How to retrieve the data from an inactive text field with a button click in an angular application?

Currently, I am working on an angular application and I'm looking for a way to copy text when a button is clicked. I need assistance in creating a function that can achieve this without relying on the clipboard API. Although I have considered using t ...

angulartypescriptformsfunctionweb-development-server

Discover the latest techniques for incorporating dynamic datalist options in Angular 13 with Bootstrap 5

React 17 Tailwind CSS dynamiclist.component.html <div> <label for="{{ id }}" class="form-label">{{ label }}</label> <input class="form-control" list="{{ dynamicListOptions }}" [i ...

angularbootstrap-5