The error, NoneType object is not subscriptable
means that you tried to do:
None[something]
If it happens in this line: js["results"][0]["geometry"]["location"]["lat"]
, that means js["results"][0]["geometry"]["location"]["lat"]
does not exist, i.e. something along that path evaluated to None.
For example, if js
is None
, it will fail trying to evaluate None["results"]
.
Or, if js["results"][0]
is None
, it will fail trying to do None["geometry"]
etc.
BTW, it is very likely that js
is None
, because you do have this:
except: js = None
There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.
::ng-deep .mat-step-header .mat-step-icon-selected {
background-color: red;
}
::ng-deep is deprecated and can be removed, also can be used
ViewEncapsulation.None in component decorator to avoid using ::ng-deep
Update with solution to problem
html file example
<div class="yellow-theme"> <----- wrapper theme class
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-
linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #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">
<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>
create theme.scss file and add it to styles in angular.json
"styles": [
"src/styles.css",
"src/theme.scss"
]
note stepper will take color of primary color
theme.scss
@import '~@angular/material/theming';
@include mat-core();
.yellow-theme {
$yellow-theme-primary: mat-palette($mat-yellow, 400);
$yellow-theme-accent: mat-palette($mat-yellow, 400);
$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);
@include angular-material-theme($yellow-theme);
}
Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class.
Component that is wrapped in custom class wil use that color, if not color are set from global theme.
Best Answer
I am able to change the color to red with the following style in the styles.css file at the root of the project rather than the stylesheet of the component
to hide the numbers inside each step just use display none in the style of the class ng-star-inserted