Angular Material Float Label Isn't floating

Question

I have an angular form on this form is two angular material inputs

There is an attribute from the doc which states you can make the label always float, so I tried to replicate it, but it didn't work for whatever reason.

Here is the HTML

<form *ngIf="frmNotes" [formGroup]="frmNotes">
                <mat-form-field [floatLabel]="always" style="width: 100%">
                    <input matInput placeholder="Subject" formControlName="subject" [(ngModel)]="note.subject">
                </mat-form-field>
                <mat-form-field [floatLabel]="always" style="width: 100%;">
                    <textarea formControlName="note" matInput placeholder="Write a note.." [(ngModel)]="note.value"></textarea>
                </mat-form-field>
            </form>

Here is the TS

import { Component } from "@angular/core";
import { ActivatedRoute } from '@angular/router';
import { ProfileService } from "../../services/profile-service";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

@Component({
    selector: 'note-component',
    templateUrl: 'note.component.html',
    styleUrls: ['./note.component.css']
})

export class NoteComponent {
    notes: any;
    frmNotes: FormGroup;
    note: LooseObject = {};

    constructor(private route: ActivatedRoute, private profileService: ProfileService, private formBuilder: FormBuilder) {
      this.frmNotes = formBuilder.group({});
    }

    ngOnInit() {
        this.route.params.subscribe(res => {
            this.profileService.getNotes(res.id).subscribe(data => {
                this.notes = data.notes;
            }, err => console.error(err));

        });
        this.frmNotes = this.formBuilder.group({
            note: ['', Validators.required],
            subject: ['', Validators.required]
        });
    }

}

Here is an image of how it looks:

Answer 1

Square brackets indicates a template expression - [floatLabel]="always" will look for a variable named always in your component, essentially the equivalent of floatLabel="{{always}}". You'll need to surround always in single quotes or remove the square brackets if you want to pass it directly: [floatLabel]="'always'" or floatLabel="always".