How to use @material/linear-progress - 10 common examples

ngAfterViewInit() {
    const element = this._elementRef.nativeElement;

    this._rootElement = element.querySelector('.mdc-linear-progress') as HTMLElement;
    this._primaryBar = element.querySelector('.mdc-linear-progress__primary-bar') as HTMLElement;
    this._bufferBar = element.querySelector('.mdc-linear-progress__buffer') as HTMLElement;

    this._foundation = new MDCLinearProgressFoundation(this._adapter);
    this._foundation.init();
    this._syncFoundation();

    if (!this._isNoopAnimation) {
      // Run outside angular so change detection didn't get triggered on every transition end
      // instead only on the animation that we care about (primary value bar's transitionend)
      this._ngZone.runOutsideAngular((() => {
        this._animationEndSubscription =
            (fromEvent(this._primaryBar, 'transitionend') as Observable)
              .pipe(filter(((e: TransitionEvent) => e.target === this._primaryBar)))
              .subscribe(() => this._ngZone.run(() => this._emitAnimationEnd()));
      }));
    }
  }

installed() {

    new MDCLinearProgress(this.shadowRoot.querySelector('.mdc-linear-progress'));
    // progress.listen('MDCSlider:change', () => {
    //   this.fire('change', { value: slider.progress })
    // });
  }

this._isEditingSource = false

    this.autosaveEl.addEventListener('click', this.handleAutosaveClick.bind(this))
    this.saveEl.addEventListener('click', () => { this.save(true) })
    this.podPathEl.addEventListener('change', () => { this.load(this.podPath) })
    this.podPathEl.addEventListener('keyup', () => { this.delayPodPath() })

    this.mobileToggleMd = MDCIconToggle.attachTo(this.mobileToggleEl)
    this.mobileToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleMobileClick.bind(this))
    this.sourceToggleMd = MDCIconToggle.attachTo(this.sourceToggleEl)
    this.sourceToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleSourceClick.bind(this))
    this.podPathMd = new MDCTextField(
      this.containerEl.querySelector('.content__path .mdc-text-field'))
    this.saveProgressMd = MDCLinearProgress.attachTo(
      this.containerEl.querySelector('.sidebar__save .mdc-linear-progress'))
    this.saveProgressMd.close()

    this.api = new EditorApi({
      host: this.host,
      port: this.port,
    })
    this.partials = new Partials(this.api)

    // Default to loading with the UI.
    this.load(this.podPath)

    // TODO Start the autosave depending on local storage.
    // this.startAutosave()
  }

getDefaultFoundation() {
    // prettier-ignore
    return new MDCLinearProgressFoundation({
      addClass: helper.addClass('rootProps', this),
      getPrimaryBar: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR),
      getBuffer: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.BUFFER_SELECTOR),
      hasClass: helper.hasClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      setStyle: (el, styleProperty, value) => el.style[styleProperty] = value,
    })
  }

hasClass: (className: string) => {
            if (className === CLASS_INDETERMINATE)
                return this._indeterminate;
            if (className === CLASS_REVERSED)
                return this._reverse;
            return this._root.nativeElement.classList.contains(className);
        },
        removeClass: (className: string) => {
            if (className !== CLASS_INDETERMINATE && className != CLASS_REVERSED)
                this._rndr.removeClass(this._root.nativeElement, className);
        },
        setStyle: (el: Element, styleProperty: string, value: number) => {
            this._rndr.setStyle(el, styleProperty, value);
        }
    };
    private foundation: MdcLinearProgressFoundationInterface = new MDCLinearProgressFoundation(this.mdcAdapter);

    constructor(private _rndr: Renderer2, private _root: ElementRef, private _registry: MdcEventRegistry) {
    }

    ngAfterContentInit() {
        this.initElements();
        this.foundation.init();
        this._initialized = true;
        this.foundation.setProgress(this._progress);
        this.foundation.setBuffer(this._buffer);
        if (this._closed)
            this.foundation.close();
    }

    ngOnDestroy() {
        this.foundation.destroy();

mounted() {
    const adapter = {
      addClass: className => {
        this.$set(this.classes, className, true);
      },
      getPrimaryBar: () => this.$refs.primary,
      getBuffer: () => this.$refs.buffer,
      hasClass: className => this.$el.classList.contains(className),
      removeClass: className => this.$delete(this.classes, className),
      setStyle: (el, styleProperty, value) => (el.style[styleProperty] = value),
    };

    this.foundation = new MDCLinearProgressFoundation(adapter);
    this.foundation.init();

    this.foundation.setReverse(this.reversed);
    this.foundation.setProgress(Number(this.progress));
    this.foundation.setBuffer(Number(this.buffer));
    this.foundation.setDeterminate(!this.indeterminate);

    if (this.open) {
      this.foundation.open();
    } else {
      this.foundation.close();
    }
  },
  beforeDestroy() {

mounted() {
    const adapter = {
      addClass: className => {
        this.$set(this.classes, className, true);
      },
      forceLayout: () => this.$el.offsetWidth,
      getPrimaryBar: () => this.$refs.primary,
      getBuffer: () => this.$refs.buffer,
      hasClass: className => this.$el.classList.contains(className),
      removeClass: className => this.$delete(this.classes, className),
      setStyle: (el, styleProperty, value) => (el.style[styleProperty] = value),
    };

    this.foundation = new MDCLinearProgressFoundation(adapter);
    this.foundation.init();

    this.foundation.setReverse(this.reversed);
    this.foundation.setProgress(Number(this.progress));
    this.foundation.setBuffer(Number(this.buffer));
    this.foundation.setDeterminate(!this.indeterminate);

    if (this.open) {
      this.foundation.open();
    } else {
      this.foundation.close();
    }
  },
  beforeDestroy() {

public componentDidMount() {
    super.componentDidMount();
    if (this.control) {
      this.MDComponent = new MDCLinearProgress(this.control);
      this.MDComponent.determinate = !this.props.indeterminate;
      this.MDComponent.reverse = !!this.props.reversed;
    }
    this.afterComponentDidMount();
  }

componentDidMount() {
    this.MDComponent = new MDCLinearProgress(this.control);
  }
  componentWillUnmount() {

<div role="progressbar"> {
						if (d) new MDCLinearProgress(d)}}&gt;
						<div></div></div>