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

Angular service encounters NotYetImplemented error due to DOCUMENT injection token in SSR

I have a unique Angular SSR app with a special service that utilizes the document. I cleverly utilize the DOCUMENT injection token to provide this essential document for dependency injection. To take a peek at my innovative approach, check out my repo here ...

angularangular-servicesangular-dependency-injectionangular-ssr

Saving HTML files can cause formatting issues

After creating a website with the web design tool "Nicepage", I noticed something strange. When visiting the site through this link: It appears to be working perfectly fine (please let me know if it isn't). The layout should resemble this image: htt ...

htmlcssweb

Issue with web bot functionality

My dynamic database page is filled with an array of hyperlinks. The layout consists of 3 columns: The first column pulls links directly from the database, the second adds a + link to each entry, and the third includes a - link Essentially, every row that ...

asp.netjquerysqlhtmlcss

the components progress down the line

For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...

jqueryhtmlcss

Determine the body's height by adding the heights of the header and footer

In my design, there is a header with a height of 8rem; .header { top: 0; left: 0; height: 8rem; } Following that, there is a footer with a height of 5rem; footer { width:100%; height: 5rem; } I am attempting to calculate the heig ...

css

Place a picture and words within a submit button

I need assistance with aligning text and a small airplane image on a submit button. Currently, the text is overlapping the image and I am unsure how to fix this issue. How can I adjust the position of the text to display to the right of the button? Is ther ...

htmlcss

Is it possible to distinguish CSS for varying input types?

Is it possible to style input type=text/radio/checkbox elements differently using CSS? I'm referring to ways other than just adding a class ...

css

Different ways to display entries based on the level of authority

In my jHipster project, I have 4 entities: user, department, userAssignmentToDepartments (where a user may belong to several departments), and order. The questions I have are: How can I display only orders with a department_id that is included in the use ...

angularjhipster

How can we stop mobile email applications from automatically converting emails into a "mobile-friendly" layout without permission?

My email design is optimized to look great on mobile, web, and desktop mail clients. However, I'm facing a challenge with some mobile clients like Gmail on Android automatically reformatting the email to make it more mobile-friendly. This leads to a m ...

htmlcssemailmobilehtml-email

As the screen width shrinks, I've noticed that my grid system in HTML using Bootstrap starts to glitch

Why is my row going onto a second line when I shrink the width? Here is a screenshot of the issue. I am currently using bootstrap 5 for this and I am unsure how to fix it. Below is the code snippet: Current Screenshot Below is the desired look on mobil ...

htmlcssbootstrap-5

Whenever the [required] tag switches from being true to false, it generates an event

Initially, I have set up an Angular form using the following code snippet buildForm() { this.form = this.formBuilder.group({ value1: this.formBuilder.control(null), value2: this.formBuilder.control(false) }); } The HTML contains a ...

htmlangularforms

Is there a disparity in capabilities or drawbacks between ViewChild and Input/Output in Angular?

As I delve into Angular ViewChild and compare it to Input/Output parameters, I can't help but wonder if ViewChild has any drawbacks or limitations compared to Input/Output. It appears that ViewChild is the preferred method, as all parameters are now ...

angulartypescriptangular8

Is it possible for a component to have multiple templates that can be switched based on a parameter?

Scenario My task is to develop a component that fetches content from a database and displays it on the page. There needs to be two components working together to create a single page, following a specific component tree structure. DataList - receives ful ...

javascriptangulartypescriptangular6angular-components

Interceptor causing Angular HTTP Client to return null value

Here are two examples of the code output in the console. In order to return an observable for an interceptor, I converted a local storage promise into an observable using switchmap. However, I am still receiving null as the value. The function is wrapped i ...

angularionic2ionic3

What circumstances warrant the utilization of an Angular service?

My understanding is that services are utilized for inter and intra component communication to abstract complex data structures. Is it accurate to say that services are exclusively used for persistent data structures? In what scenarios should we avoid usi ...

angularangular-services

Display an image on an HTML page based on the TypeScript data in an Ionic Angular application

After retrieving user profile data from the database and storing it in an observable, I am able to access properties such as profileData.username, profileData.msgnumber, and more. When profileData.avatar returns the name of the avatar the user is using, I ...

htmlangulartypescriptionic-framework

Step-by-step guide on replicating a website along with its CSS styles and scripts

I've been exploring the idea of cloning a webpage, such as Instagram's login page, along with its CSS elements and JavaScript, to use locally. Basically, I want to duplicate the login page and host it on my test server in a way that allows it to ...

javascripthtmlcssweb-scrapingbeautifulsoup

Adjust the background of the page at regular intervals

I currently have: <script type='text/javascript'> var imageID=0; function changeimage(every_seconds){ //change the image if(!imageID){ document.getByTagName("body").src="icwXI.jpg"; imageID++; } else{if(imageID==1){ document.ge ...

javascripthtmlcss

Updating Time by Adding Minutes using ngFor Loop in Angular 4

I'm currently developing a scheduler that requires user input for start time and the time between two games. I am looking to display the time in a loop using ngFor, incrementing by minutes each time. How can I accomplish this within an Angular 4 HTML ...

javascriptangulardatetimeangular2-forms

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

I have implemented ngx-slick-carousel to showcase YouTube videos in my project. However, I am facing two main issues. Firstly, the carousel is not infinite, and when the last video is reached, there appears to be white spaces before it loops back to the fi ...

javascriptjqueryangulartypescriptbootstrap-5