How can I hide and show password text

[Staler2019]

For the following code, I want to make password text hide and show. How can I do?

<md-outlined-text-field label="password" type="password" name="Password">

            <md-icon-button toggle slot="trailing-icon" form="">
                @* show btn *@
                <md-icon>visibility</md-icon>
                @* hide btn *@
                <md-icon slot="selected">visibility_off</md-icon>
            </md-icon-button>

</md-outlined-text-field>

[asyncLiz]

Add a click listener to the icon button and swap the text field's type with password or text

https://lit.dev/playground/#gist=f64f6ee859231ab1e0c955b5a9153afc

iconbutton.addEventListener('click', () => {
  textfield.type = iconbutton.selected ? 'text' : 'password';
});

[Staler2019]

Thank you.
That a beautiful trick let me understand more about this package.

[alexmeier-19]

@asyncLiz I tried this approach, but "textfield.type" expects a "TextFieldType" ( type: TextFieldType | UnsupportedTextFieldType = 'text'; ) How do you assign just a string? Am I missing something?

[asyncLiz]

Try adding 'text' : 'password' as const; in Typescript at the end. This will tell TS to use the strings as their literal types instead of the generic string type.