actual use of foundation and adapter class of mdc-components

Question

I am trying mdc-components with angular4 project created using angular-cli. So I installed moduled using npm command

npm install material-components-web

this installed

"material-components-web": "^0.22.0"

Then created a component that contains HTML markup of slider

<div #slider class="mdc-slider" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Select Value">
    <div class="mdc-slider__track-container">
        <div class="mdc-slider__track"></div>
    </div>
    <div class="mdc-slider__thumb-container">
        <svg class="mdc-slider__thumb" width="21" height="21">
            <circle cx="10.5" cy="10.5" r="7.875"></circle>
        </svg>
        <div class="mdc-slider__focus-ring"></div>
    </div>
</div>

On the ts side get the element using ViewChild

 @ViewChild('slider') elSlider: ElementRef;

and wrapped this element using MDCSlider class

let mdcSlider = new MDCSlider(this.elSlider.nativeElement);

and then imported sass file for the same mdc component in styles.scss file

@import '~@material/slider/mdc-slider';

this rendered a beautiful material slider component on UI and it works fine.

To listen change event

mdcSlider.listen('MDCSlider:change', () => console.log("Value changed to ",mdcSlider.value));

and that logs the current value of slider on browser console.

But I am confused with the foundation and adapter classes of each component.

From the documentaion, I got

foundation class is to interact with the dom element and on the name of interaction I can

1) listen events

2) get/set the current value of component

and I can pass my custom adapter to the foundation class.

I have some queries on this

1) To use a component, every time, I have to use foundation class? with custom adapter implementation?

2) Any scenario or example that shows the use of foundation and adapter except for the checkbox example of angular2?

3) Is foundation class used if I have to create my own angular component?

Answer 1

For the most part, these questions are related, I'll answer one at a time:

To use a component, every time, I have to use foundation class? with custom adapter implementation?

Yes. Currently, there is a life cycle for JavaScript MDC Web components wherein a default adapter is passed to the foundation every time a component is initialized. You can either retain a reference to it, or utilize the attachTo() function if you just want it all to happen automatically. All of this is to say that even if all you are doing is initializing a new component, you are using the adapter/foundation pattern, as it is part of the life cycle of a component. The only time you should need to customize the adapter is if you are in a context that deviates from idiomatic JavaScript with regards to interacting with the DOM, i.e.: Vuejs, React, etc...

Any scenario or example that shows the use of foundation and adapter except for the checkbox example of angular2?

We are in the middle of shifting our approach here. We currently have a few examples that are about 6 months old in /framework-examples in the root of the repository. We also have a couple open pull requests where we link out to external projects that we think are headed in the right direction. Currently we are reviewing one for Angular and one for React. This is the approach we'll take in the future.

Is foundation class used if I have to create my own angular component?

Yes. Here as example from the Angular project we are evaluating

In this example you can see that the Foundation is indeed used here, as well as a custom adapter object from mdc.textfield.adapter.ts

Notice he defines private foundation: {...} = new MDCTextfieldFoundation(this.adapter), then in the ngAfterContentInit() function, he calls the foundations init() method. This is exactly how we would suggest you use MDC Web in an Angular app.