Discovering the material tabs feature at https://material.angular.io/components/tabs/api#MatTab got me excited to implement it in my project.
After adding the suggested import, I encountered an issue where I couldn't find the module "@angular/material". Fortunately, I found a solution on Stack Overflow and successfully imported the necessary components into my maintab component.
However, even after resolving the import error, the mat-tab links were still not functioning properly. Below is the code for my maintab.component.ts:
import { Component, OnInit } from '@angular/core';
import {MatTabsModule} from '@angular/material';
@Component({
selector: 'app-maintab',
templateUrl: './maintab.component.html',
styleUrls: ['./maintab.component.css']
})
export class MaintabComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
And here's the code snippet from my maintab.component.html:
<mat-tab-group>
<mat-tab label="One">
<h1>Some tab content</h1>
<p>...</p>
</mat-tab>
<mat-tab label="Two">
<h1>Some more tab content</h1>
<p>...</p>
</mat-tab>
</mat-tab-group>
Despite this implementation, I continued to encounter errors such as:
Error: Template parse errors:
'mat-tab' is not a known element:
1. If 'mat-tab' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-tab-group>
[ERROR ->]<mat-tab label="One">
<h1>Some tab content</h1>
<p>...</p>
"): ng:///AppModule/MaintabComponent.html@1:2
'mat-tab' is not a known element:
1. If 'mat-tab' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<p>...</p>
</mat-tab>
I am currently unsure about what steps to take next to resolve these issues.