Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where and how to import MAT_LABEL_GLOBAL_OPTIONS?

Following this example Form field with label, I tried to change the behavior of mat-form-field placeholder. There are three options: auto, always and never.

The feature is really a good one and can be used depending on which kind of placeholder developer would like to implement.

And actually it can be used globally passing it directly to @NgModule of the app root:

@NgModule({
  providers: [
    {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
  ]
})

and building the view as following:

<mat-form-field [floatLabel]="never"> // never, auto or always
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

My issue is that I first don't find/know where I exactly can/should import: MAT_LABEL_GLOBAL_OPTIONS as it seems that it doesn't exist in @angular/material and if I check on this GitHub-Repo, I see that it's imported from @angular/material/core, but it doesn't work form me, cause I get the following error:

/node_modules/@angular/material/core"' has no exported member 'MAT_LABEL_GLOBAL_OPTIONS'. Did you mean 'MAT_RIPPLE_GLOBAL_OPTIONS'?

Has it to do with the material and CLI version I'am using?

Angular CLI: 1.5.0
Node: 8.0.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc.2
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1
like image 888
k.vincent Avatar asked Apr 11 '18 09:04

k.vincent


2 Answers

In Angular 9 this has changed again:

As of Angular Material version 9, the MAT_LABEL_GLOBAL_OPTIONS injection token is deprecated. The default floating label behavior should be set through the MAT_FORM_FIELD_DEFAULT_OPTIONS token.

Current way is therefore to add { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } } to the providers array of your module.

For this to work in Angular 11

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
like image 94
Spikolynn Avatar answered Nov 18 '22 07:11

Spikolynn


The minimum version of material to support MAT_LABEL_GLOBAL_OPTIONS is 5.0.0-rc.3.

Because it is exported in this file: https://github.com/angular/material2/blob/5.0.0-rc.3/src/lib/core/label/label-options.ts, but the rc.2 don't have this file https://github.com/angular/material2/blob/5.0.0-rc.2/src/lib/core/label/label-options.ts page not found. So try to update to RC.3.

See the 5.0.0-rc.3 release note: https://github.com/angular/material2/releases/tag/5.0.0-rc.3

form-field: add support for separate label and placeholder (#8223) (d6fec35), closes #6194

this feature add new export const: MAT_LABEL_GLOBAL_OPTIONS

like image 3
Xin Meng Avatar answered Nov 18 '22 07:11

Xin Meng