How to use Material Components Web Foundations

Question

Using Material Components, I am trying to figure out how to use the methods of the Foundations of the components.

For an example, I have

<div role="progressbar" class="mdc-linear-progress">
  <div class="mdc-linear-progress__buffering-dots"></div>
  <div class="mdc-linear-progress__buffer"></div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
</div>

and in my JS I have

const bar = $('.mdc-linear-progress')[0];

const MDCLinearProgress = mdc.linearProgress.MDCLinearProgress;
const MDCLinearProgressFoundation = mdc.linearProgress.MDCLinearProgressFoundation;

const progress = new MDCLinearProgress(bar);
const progressFoundation = new MDCLinearProgressFoundation(bar);

progressFoundation.setProgress(0.5);

as you can see my goal is trying to use methods like setProgress from the MDCLinearProgressFoundation class. Though this isn't working and I'm unsure as to what I'm doing wrong as it gives no error either.

Codepen - https://codepen.io/ErraticFox/pen/LdwYxb

Answer 1

Looking at the documentation, on MDCLinearProgress, the set progress method is a property setter (which is a function which is invoked when a given property is written to). As such, it isn't called as a function, but like so (where myDiv is a pointer to the div tree you created in your question):

var mlp = new mdc.linearProgress.MDCLinearProgress(myDiv);
mlp.progress = 0.5;

Hope this helps!