logo
Tags down

shadow

Material Design for Bootstrap Angular Stepper not working


By : Karthikk
Date : August 30 2020, 07:00 AM
wish help you to fix your issue A component from angular-bootstrap-md is not imported, so if you import the whole MDBBootstrapModule, it will be working for now, also add the schema NO_ERRORS_SCHEMA as found on the documentation of angular-boostrap-md. Your app.module.ts would look like this:
code :
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { WavesModule, } from 'angular-bootstrap-md';

@NgModule({
  imports:      [ 
    WavesModule.forRoot(),
    BrowserModule, 
    MDBBootstrapModule.forRoot(),
    ReactiveFormsModule,
    ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }


Share : facebook icon twitter icon

Bootstrap material design not working properly with dynamic angular views


By : slash.dash
Date : March 29 2020, 07:55 AM
Does that help The problem is that the material design plugin for bootstrap works by applying transformations to the DOM and it is not designed to work automatically with frameworks like Angular.
The material framework requires you to declare a script like the following to initialize components:
code :
<script>
  $.material.init();
</script>
// add the "done" boolean inside ripples.js
window.ripples = { 
    init: function(withRipple) { /*bla bla*/ },
    done: false
}

// Then, where you run ripples.init... (aka, material.js, or maybe directly inside the init function of ripples.js)
if (!window.ripples.done) { 
  ripples.init();
  ripples.done = true;
}

OpenLayers 5 | Angular 7 | Angular Material | Map is not working inside angular material mat-stepper


By : Morderash
Date : March 29 2020, 07:55 AM
like below fixes the issue I believe your issue is related to the content you're trying to attach the OLMap to being in the transcluded content of the mat-stepper or mat-step.
In the component lifecycle, the child component is not ready at the parent's OnInit step. Because you put the div you need inside of the mat component, it is being included in that component lifecycle instead.
code :
ngAfterViewInit() {
  this.map = new OlMap({
    target: 'map',
    layers: [this.layer],
    view: this.view,
  });
}
// html
<mat-horizontal-stepper ...>
  <mat-step ...>
    <form ...>
      ...
      <div #myMapRef id="map"></div>
      ...
    </form>
  </mat-step>
  ...
</mat-horizontal-stepper>

// parent ts
@ContentChild('myMapRef') // <-- if it's in a child component, your case should use this
@ViewChild('myMapRef') // <-- if it's in this component, your "this is working" would use this
myMap: ElementRef;

ngAfterViewInit() {
  console.log(this.myMap); // can get the ID from the ElementRef
}

Get step index from Angular Material Design Stepper


By : Yuri Trainis
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Try to set explicitly stepControl to your matStep. E.g. firstFormGroup, secondFormGroup :
code :
<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <!-- The code is omitted for the brevity -->
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <!-- The code is omitted for the brevity --> 
     <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS


By : user3037375
Date : March 29 2020, 07:55 AM
I hope this helps you . The question is really about controlling CSS variables via TS - i got help from this post here;
CSS: we assign the 3 variables to the 3 icons which we needed to color HTML: We created 2 divs firstClass & secondClass in addition to the , to which we can assign the uniquely named variables color1, color2 and color3; Since we are using 'mat-table' we can't use [ngStyle] or [ngClass] because the material elements are created at run time and we can only operate on any of them AfterViewInit event, so it is here that we assign values to our 2 divs & tag;
code :
::ng-deep .mat-step-header:nth-of-type(1) .mat-step-icon {
    background-color: var(--my-var1);
 } 

::ng-deep .mat-step-header:nth-of-type(2) .mat-step-icon {
    background-color: var(--my-var2);
 } 

::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
    background-color: var(--my-var3);
 } 
<div class='firstClass'>
    <div class=' secondClass'>
        <mat-horizontal-stepper labelPosition="bottom" #stepper>
            <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                    <ng-template matStepLabel>Fill out your name</ng-template>
                    <mat-form-field>
                        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
            </mat-form-field>
            <div>
                <button mat-button matStepperNext>Next</button>
            </div>
        </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup" optional>
        <form [formGroup]="secondFormGroup">
            <ng-template matStepLabel>Fill out your address</ng-template>
            <mat-form-field>
                <input matInput placeholder="Address" formControlName="secondCtrl" required>
            </mat-form-field>
            <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button matStepperNext>Next</button>
            </div>
        </form>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        You are now done.
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button (click)="stepper.reset()">Reset</button>
        </div>
    </mat-step>
  </mat-horizontal-stepper>
  <div>
<div>
import {Component, OnInit,AfterViewInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'stepper-label-position-bottom-example',
  templateUrl: 'stepper-label-position-bottom-example.html',
  styleUrls: ['stepper-label-position-bottom-example.css'],
})
export class StepperLabelPositionBottomExample implements OnInit, AfterViewInit {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  color1:string = 'green';
  color2:string = 'yellow';
  color3:string = 'red';

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  ngAfterViewInit(){
    document.querySelector("body").style.cssText = "--my-var1: "+this.color1;
    (<HTMLElement>document.querySelector('.secondClass')).style.cssText = "--my-var2: "+this.color2;
    (<HTMLElement>document.querySelector('.firstClass')).style.cssText = "--my-var3: "+this.color3;
  }

}

Angular 2+ Material stepper : Is it possible to open all steps in material stepper


By : Yovla
Date : March 29 2020, 07:55 AM
wish helps you For vertical stepper, just add the following in your component's css file:
code :
::ng-deep .mat-vertical-stepper-content { 
  visibility: visible !important; 
  height: 100% !important; 
}
Related Posts Related Posts :
  • Kubernetes internal CORS issues between services
  • Ionic set marker on location or based on longitude and latitude
  • CAN NOT expand Angular Material table
  • Share a angular library across multiple projects
  • How to import pipe to 2 modules(AppModule and ChildModule)?
  • How to disable the drag option on Angular material Slide toggle component
  • Does Spartacus support Hybris on-premise?
  • Bind regular expression from json to typescript
  • How can i get the selected value in ion-alert radio alert
  • How to get all attributes of an object
  • Using angular elements inside the same angular project
  • RxJS assign observable and get data in one stream
  • Why I can not use anguar/material elements?
  • Getting Error when running 'ng test' Command
  • How can I make another request within catchError?
  • angular 7 input number validation
  • Dont show digits after decimal using angular pipe
  • How to use same component in normal way and with angular material dialog both?
  • How to integrate ReSharper with WebStorm
  • Google cloud application yaml for angular 7
  • How to perform concurrent HTTP requests on rows of a table
  • Angular 7 - deploy workspace applications (projects) in isolation
  • how to turn off differential loading in Angular v8?
  • How to add and update npm packages for a new Angular app in Visual Studio 2019
  • Angular 7, Ngrx, Rxjs 6 - Accessing state between lazy loaded modules
  • cannot find symbol import com.google.firebase.iid.FirebaseInstanceIdService error in ionic3
  • AWS CodePipeline, build failed and getting error
  • CORS problem with Angular and laravel even after setting the CORS header and server response
  • Angular, when the variable is mentioned in the url, the variable is not replaced with its value. Ex: ${username}
  • How to apply two ngIf on single html element with two different conditions
  • Ionic not importing ngx-mathjax module
  • How to display base64 image on iPhone in Ionic 4
  • ngFor in columns with diferents properties
  • How catch the http errors with map
  • How to format a Date field in Angular project
  • focusing ng-select filter input on drop down open
  • Angular 7 PDFJS Component
  • NestJs Errors stemming from @types dependencies in node_modules when running start:prod on fresh project
  • How to override ion-back-button action in ionic 4 with angular 7
  • How can I have an array in input form?
  • Angular 6 component test with a variable into HTML
  • Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  • How to deal with Google recaptcha backend validation response delay
  • Logging in using @angular/fire/auth results in 403 error on localhost
  • In Angular, with ViewChild/ ViewChildren, how do I get the child of a child?
  • Material Dialog Close on mouseleave (angular material)
  • Ngx-Datatable - How to handle a boolean data of a row
  • Send data post in angular
  • Expected Arguments 1-3, but got 0
  • Immediate response after subscribtion
  • Convert JSON array received from API to JSON Object in Angular
  • Ionic 4 with angular 7, Cannot find type definition file for '@types'
  • ngrx effects property payload does not exist on type never
  • Child component life cycle in parent component
  • How to make custom wrapper for 2 field groups with ngx-formly?
  • Subject.subscribe not firing in ngOnInit
  • Angular Nginx Docker 404
  • I have 'expression changed after it has been checked error 'if I use *ngif, but it not appears if i use [hidden]
  • Selection animation doesn't work for Angular (7) Material Tabs
  • Create Component without folder
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk