8) Mat-Form-Field Input (outline) Customization in Angular 15 | angular 15 tutorial

🚀 Hello Everyone Welcome to my channel, Angular 16 in-depth tutorial, we are customizing the Mat List in Angular 16 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, share & subscribe and support my channel to more get video.

#angular #MatListCustomization #Angular16Design #UIEnhancement #TechTutorial
#DevelopmentGuide #AngularDevelopment #DesignTips #WebDevelopment #UserInterface #design #designtips #designer #designs #webdevelopment #angulardevelopment #CodeLikeAPro #input #List #mastercoding #html #html5 #css #css3 #bootstrap #bootstraptutorial #angulartips #angulardevelopment #angular16 #angular_js #codewithbear

What we customize the Mat-Form-Field Input Fully Customize in this Video :
- Bydefault Border color,
- Hover to change Border Color,
- Focus to Change Border Color,
- Input Text Color,
- Label Color,
- Placeholder Color,
- Input Caret Color,
- Label Font-size, Scale & Position,
- Focus to Change Label Text-Color & Background,
- Change Bydefault Background Color

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// change input left side border-radius
::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
border-top-left-radius: var(--mdc-shape-small, 12px) !important;
border-bottom-left-radius: var(--mdc-shape-small, 12px) !important;
}

// change input right side border-radius
::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
border-top-right-radius: var(--mdc-shape-small, 12px) !important;
border-bottom-right-radius: var(--mdc-shape-small, 12px) !important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Angular Material v15.2.6 :

Visit on Website :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Don't miss out on this transformative tutorial! Subscribe, like, and hit the bell icon for more in-depth tech guides. Let's embark on this coding adventure together! 💻🔧

[FM-golq]

Hello thanks great video man keep up your great work you are helping people out here a

[vasantchimmalagi]

thank you that fixed my issue but i am using mat-icon and how to match mat-icon the line of input field

[lshadowSFX]

this is amazing but how did you get all of that? like, how did you know all of thoses classes and specifity to modify the style?

[irfankhatri]

Thank you so much "Code with Bear"

[alessiograziani]

developers need Copy and Paste... Thanks for the video, but with the long selector names and the small font used, applying these rules requires a lot of time...

[wulfhound]

hey, I just migrated from 14 to 15, but weirdly enough, this code doesn't work and I get the warning, ::ng-deep is deprecated. I do get the correct style when I place it in the styles.scss tho

[manosane]

Hey Mr. Code with Bear, your solution was almost functional, only the label part wasn't working for me.

::ng-deep .mat-mdc-form-field-infix {
padding-top: 0px;
padding-bottom: 0px;
margin-top: 4%; /*you can tweak around with this, */
margin-bottom: -15%; /*and this*/
}

/*you also have to adjust the label, after the above*/
::ng-deep {
top: 50%;
}
::ng-deep
top: 80% !important;
}

Issue was resolved with this. You can remove ng-deep if u want the styles to exist at styles.css. Maybe this will help someone.

Angular 17

[ZianV]

Thank you so much, you helped me a lot!! Do you know how to change outline-shape-radius?

[gskhansir]

Bhai vedio daalte raho yaar main esi itntezar me tha

[chiragrajpal]

ng-deep is deprecated, can you do it in other way?

[rbi]

How can i change these setting only for one matInput in my app, without using ng-deep?? ::ng-deep affects all controls in the app

[siddharthslayer]

It's not working for material version 17 :(

[agfloresca]

How to change the panel of a mat-select? .mat-mdc-select-panel does not work

[piyushshukla]

How can I wrap text in multiline in text field? Please guide me brother

[tarunsarode]

can u pls tell how we can read and change material by own
self

[mirrorofmirror]

how to change border radius for mat feild input?

[irfankhatri]

Mere pas ke work nahi kar raha hai mujhe kia karna chaiye?

// Focus to change border color in mat-input
::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mdc-notched-outline__leading,
::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused.mdc-notched-outline__notch,
::ng-deep {
border-color: green;
border-width: 2px;
}