Materials 3, trying to get started with Angular 17

[dreamstar-enterprises]

I've read all the docs. I still can work out how to use this in my Angular 17 project.

I do this, npm install @material/web, and then import a component, like this,

import {MdOutlinedTextField} from '@material/web/textfield/outlined-text-field.js'

After that I try import MdOutlinedTextField, into the component, but cannot , as it complains that the import is for standalone components only

Then including this, , in the html, gives this:

Application bundle generation failed. [0.389 seconds]
⠸ Changes detected. Rebuilding...✘ [ERROR] TS-992012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler]

src/app/2. contract-module/edit-tabs/personal-information-edit/personal-information-edit.component.ts:27:120:
27 │ ...t, FieldEntryComponent, ReactiveFormsModule, MdOutlinedTextField],

Sorry, I'm a beginner : (

The Quick User Guide is a bit too brief on step by step instructions...

[asyncLiz]

The custom element class MdOutlinedTextField cannot be registered in the @NgModule's components array since it isn't an Angular component.

Instead, you should import the component registration as a side effect and enable its use with schemas: [CUSTOM_ELEMENTS_SCHEMA] in your @NgModule or @Component metadata.

// Import custom element registrations. These are called side-effect imports.
// You can import them all at once, or in each individual Angular component that
// uses them (better for tree-shaking and code splitting).
import '@material/web/textfield/outlined-text-field';

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyModule {}

[dreamstar-enterprises]

I'm doing this, but I think I'm missing a beginner trick:

/***** Angular Imports *****/
import { Component, inject, Signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

/***** Angular Material Components *****/
import { MdOutlinedTextField} from '@material/web/textfield/outlined-text-field';
(but MdOutlinedTextField remains faded gray, like Angular cannot recognise it)

@Component({
  selector: 'app-personal-information-edit',
  standalone: true,
  imports: [CommonModule,....., CancelButtonComponent],
  templateUrl: './personal-information-edit.component.html',
  styleUrl: './personal-information-edit.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class PersonalInformationEditComponent {

}

HTML

    <md-outlined-text-field label="Label" value="Value">
    </md-outlined-text-field>

No errors this time. Thank you! But, this now renders nothing when I load the component, rather than a text field : (

[dreamstar-enterprises]

Note, I'm using a standalone component as the Angular team recommends this, rather than NgModules

[asyncLiz]

Change

import { MdOutlinedTextField} from '@material/web/textfield/outlined-text-field';

to

import '@material/web/textfield/outlined-text-field';

Angular is likely dropping the import during the build because the type is not used. You need to use a side-effect import to ensure it isn't tree-shaken.

[dreamstar-enterprises]

It works!
Thank you!
Worth updating the Quick Start Guide for this, as I was lost for about 1 day.