Is it possible to have unique styles for individual tabs in a mat-tab-group using Angular Material?

Is it possible to have different text colors for each tab in a mat-tab-group and change the color of the blue outline at the bottom? If so, can you provide guidance on how to achieve this?

Here is the default appearance of the tabs in my app: https://i.stack.imgur.com/6J99s.png

This is the desired look for the tabs:

https://i.stack.imgur.com/ZMfUT.png

The code for the tabs:

  <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)" [(selectedIndex)]="matTabSeleccionada">

                <mat-tab class="" label="Total">

                </mat-tab>

                <mat-tab class="" label="Bayer">

                </mat-tab>

                <mat-tab class="" label="Monsanto">

                </mat-tab>

            </mat-tab-group>
cssangularangular-material

Answer №1

One way to style the label in Angular material is by using a template. You can check out an example on Stackblitz

<mat-tab-group>
  <mat-tab label="First">
    <ng-template mat-tab-label>
      <span class="red-bold">zzzzz</span>
    </ng-template>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Check out the resulting image below:

https://i.stack.imgur.com/2e1fZ.png

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

Substitute the division

Can I make the old div change its position and move to the side when I add a new div? And can all the old divs be hidden when adding four new divs? This is for my full news website and I want this applied to all four pages. First page: More pages: 2 pag ...

javascripthtmljquerycss

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

jqueryhtmlcss

Keeping the Bootstrap popover anchored to the content

I have a functional bootstrap popover that includes a time attribute. However, I am looking to enhance its functionality so that it remains open when the mouse is on the content and closes only when the mouse leaves the content. Here is the relevant code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can the <container> block be positioned beneath the <header> block?

header { background: blue; color: white; width: 100%; } .container { background: green; text-align: center; width: 100%; height: 100px; transform: skew(0, -10deg); color: white; position: relative; top: 55px; } .container .home{ p ...

htmlcss

Displaying the count of items outside the Angular 2 ngFor loop

As a beginner in Angular, I've encountered a small issue. How can I display the actual number of items outside of an *ngFor loop? Currently, I'm using filter and pagination pipes in this manner: *ngFor="let item of items | filterBy: ['name ...

angularcountngfor

Steps for adjusting the position of this div in relation to the main container

Apologies in advance for my lack of HTML skills. I am struggling with a page layout issue. I have a website at . When the window is resized, the ads div on the right side overlaps the main container. What I would like to achieve is to make this ads div re ...

javascriptjqueryhtmlcss

Tips for presenting retrieved HTML unchanged within an Angular 2 template

Currently, I am fetching post data from a remote server. The content of the posts includes HTML with style and class attributes which are generated by a WYSIWYG editor. My goal is to display the HTML data as it is, without any filtering or sanitization. ...

angularjsangularangular2-template

Browser prioritizes Bootstrap over custom CSS styles

I've organized my stylesheet directory like this: stylesheets bootstrap.min.css style.css Within my style.css file, I've made adjustments to the pre tag styling: pre { background-color: #d9edf7; border: #d9edf7; color: navy ...

htmlcsstwitter-bootstrapgoogle-chromestylesheet

Is it possible to access the attributes of an interface in TypeScript without relying on external libraries?

Ensuring the properties of an interface align with an object that implements it is crucial for successful unit testing. If modifications are made to the interface, the unit test should fail if it is not updated with the new members. Although I attempted ...

angulartypescript

Begin the div at a width of 0 pixels and expand it towards the right

My current project involves opening a row of blocks with an animation. The desired outcome is to transition from 2 blocks to 3 blocks by clicking a button. Specifically, the block that needs to be added should appear in the middle and fade in from left to ...

jqueryhtmlcssanimation

Unable to modify text color after implementing mat-sort-header in Angular Datatable

My current setup involves using an Angular data table to display data. I recently added the mat-sort-header functionality, which allowed me to change the font color of the header text. Below is a breakdown of my code: <section id="main-content" ...

cssangularangular-material

Two primary router outlets featuring unique layouts

Design for all users Design for staff members (such as admin control panel) I am using a router-outlet with the first design. How can I switch to the second design at "/personnel"? I want to keep both designs intact since "personnel" has its own componen ...

angularroutesrouteroutlet

Managing the height of a hero section with TailwindCSS and React.js

Embarking on my first website project using React and Tailwind has been an exciting learning experience. My vision is to showcase a Hero Section prominently at the top, with a Nav bar situated elegantly at the bottom of the screen. To bring this concept ...

htmlcsstailwind-css

After installing the latest version of Node.js, the stability of the Ionic environment

After updating nodejs from v8.1 to v12, my ionic environment is experiencing instability. Any suggestions on what needs to be updated? [abc]$ ionic cordova emulate android When running ng run app:ionic-cordova-build --platform=android, an unhandled exce ...

node.jsangularcordovaionic-framework

Utilize a variable within an HTML attribute

Currently utilizing Angular and I have the following HTML snippet <input onKeyDown="if(this.value.length==12 && event.keyCode!=8) return false;"/> Is there a way for me to incorporate the variable "myNum" instead of the ...

javascripthtmlangular

CSS trick for stylish arrow placement on top of a slide

Hey there! This is my first time navigating through the slick carousel functionality. I'm currently facing a challenge with adjusting the positioning of the arrow within the slider. My goal is to have the arrow displayed at the top level just like the ...

htmlcsssliderpositionslick.js

Learn how to retrieve data from a parent component in Angular 8 by leveraging the window.opener property in a child window

On my Angular application, I have 2 separate pages - page1 and page2. Page1 has a button that, when clicked, opens page2. Since they are different components, I need to use window.opener to access data from page1 in page2 by calling window.opener.page1Func ...

angularwindow.openwindow.opener

I can't figure out why this Angular code for an Ionic alert isn't functioning properly

async displayNotification() { const notification = await this.notificationController.create({ header: 'Notification', subHeader: 'Additional Info', message: 'This is a notification message.', button ...

angularionic-frameworkionic4

The CSS animation is functioning smoothly in Chrome, but unfortunately, it is not working in Firefox

I'm having trouble with my animation not working in Firefox and Safari, even though it works fine in Chrome. I've tried using the -Moz- and -WebKit- vendor prefixes, but it seems that Firefox and Safari already support the animation. CSS: .vi ...

htmlcssfirefoxsafari

Achieve uniform display across browsers: Implement Chrome's overflow ellipsis feature on Firefox

I am seeking a CSS solution to achieve the same "overflow: hidden" and "text-overflow: ellipsis" behavior in Firefox as I get in Chrome. In Chrome, when the width of the tag is reduced, the text gets hidden and replaced with an ellipsis. However, in Firefo ...

htmlcssgoogle-chromefirefoxcross-browser