Quiero implementar el < mat-tab-group > de Angular material. Me interesa obtener el tamaño de pantalla para poder cambiar el valor de su atributo mat-align-tabs="center". En pantallas pequeñas se use el "center" y en pantallas MD en adelante usar el "end".
Código HTML sin tocar
<mat-tab-group mat-align-tabs="center">
<mat-tab label="Inicio">
<app-inicio></app-inicio>
</mat-tab>
<mat-tab label="Explorar">
<app-explorar></app-explorar>
</mat-tab>
<mat-tab label="Cuentas">
<app-cuentas></app-cuentas>
</mat-tab>
</mat-tab-group>
Código HTML de Módificado
<mat-tab-group attr.mat-align-tabs="{{posicion}}">
<mat-tab label="Inicio">
<app-inicio></app-inicio>
</mat-tab>
<mat-tab label="Explorar">
<app-explorar></app-explorar>
</mat-tab>
<mat-tab label="Cuentas">
<app-cuentas></app-cuentas>
</mat-tab>
</mat-tab-group>
Código TS
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
public posicion: string;
constructor() {
this.posicion = 'center';
}
ngOnInit(): void {
}
}
La variable "posicion" es la que quiero cambiar su valor dependiendo el tamaño de pantalla.