The spinner comes up on page load however the loading text is showing but the icon is not showing. I have followed the documentation but I can't seem to find the issue. This is a screenshot of what I see on the page
package.json
"ngx-spinner": "^13.1.1",
angular.json
"styles": [
"node_modules/ngx-spinner/animations/ball-scale-multiple.css",
"node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"src/css/reset.css",
"src/css/styles.scss"
],
app.module.ts
import { NgxSpinnerModule } from "ngx-spinner";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
imports: [
NgxSpinnerModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
app.component.html
<ngx-spinner
bdColor="rgba(51,51,51,0.8)"
size="medium"
color="#fff"
type="ball-scale-multiple"
>
<p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>
app.component.ts
import { NgxSpinnerService } from 'ngx-spinner';
constructor(private spinner: NgxSpinnerService){}
ngOnInit(): void {
/** spinner starts on init */
this.spinner.show();
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 5000);
}
app.componet.html
Added [fullScreen] = "true" to ngx-spinner tag
<ngx-spinner
bdColor="rgba(51,51,51,0.8)"
size="medium"
color="#fff"
type="ball-scale-multiple"
[fullScreen] = "true"
>
<p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>
For the ngx-spinner you also need to add to your imports array in app.module.ts the BrowserAnimationsModule.
From
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
I had a same issue. you have to recompile the project (ng serve) after your added the type="ball-scale-multiple"
then you can showing correctly
this also keep in mind
Related
I am attempting to display a list of the names of users of my application. Included
in the display is supposed to be an icon button which will perform some action
when pressed. I am using Angular Material components.
I believe I have all the important imports to the module. The code below shows
the material design components I imported:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MatListModule } from '#angular/material/list';
import { MatToolbarModule,
MatCardModule,
} from '#angular/material';
import { routeCmp } from './app.router';
import { NewuserModule } from './newuser/newuser.module';
import {MatIconModule} from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
#NgModule({
declarations: [
AppComponent,
MainComponent,
],
imports: [
BrowserModule,
MatToolbarModule,
MatCardModule,
MatListModule,
MatIconModule,
BrowserAnimationsModule
],
// the rest of the code omitted for brevity
})
export class AppModule { }
Based on examples I've seen on the Internet, I have the following HTML for my
display:
<mat-nav-list>
<mat-list-item *ngFor="let names of userNames">
<div matLine>{{ names }}</div>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
Note that userNames is (currently) just an array of strings.
My code is similar to the code shown below, which is taken from an example at
https://stackblitz.com/edit/list-examples?file=app%2Fnav-list%2Fnav-list.component.html
<h5>Complex Nav List</h5>
<mat-nav-list>
<mat-list-item *ngFor="let link of links">
<a matLine href="javascript:void(0)">{{ link }}</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
The display from the example is shown in the picture below:
Unfortunately, what I am seeing instead is a button and text:
Obviously, I am missing something. There is something not described in the example that
makes it work. I did try recreating the example code in my own development setup, based
on what I downloaded from the site. The example code failed to properly display the
icon in my environment.
Can someone tell me what I am missing here? How can I get my list to properly display
the icons in my list?
You need to import Material Icons fonts into your project.
In index.html, add the following code.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Since you are using mat-icon-button, you also need to import MatButtonModule into your AppModule imports.
You appear to be missing the MatButtonModule in your AppModule's imports.
Using Angular 5 and Firebase, I have created a review website that allows users to create reviews on the CreateComponent and read them on the ReviewComponent. I'd like the body of the review to be able to contain HTML for links or images.
The ReviewComponent pulls the body of the review with:
<p style="margin-bottom: 2rem; white-space: pre-wrap;">{{review.body}}</p>
I am using pre-wrap to maintain the body's line breaks.
An example input from the CreateComponent would be:
I already can’t wait to see what comes next.
When I inspect the output of the body I see this:
<p _ngcontent-c1 style="margin-bottom: 2rem; white-space: pre-wrap;">I already can’t wait to see <a href="http://www.ign.com/articles/2017/11/30/marvels-the-avengers-infinity-war-trailer-breakdown">what comes next.</a></p>.
How can I change the HTML to enable the string to work correctly with links and images?
Binding review.body to [innerHTML] corrected this.
<p style="margin-bottom: 2rem; white-space: pre-wrap;">{{review.body}}</p>
is now
<p style="margin-bottom: 2rem; white-space: pre-wrap;" [innerHTML]="review.body"></p>
Here is solutions for your issue:
https://plnkr.co/edit/VHvVpvnTeoGWsA0d3eex?p=preview
Here is code:
//our root app component
import {Component, NgModule, VERSION, Pipe, PipeTransform, ChangeDetectorRef } from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
import { FormsModule } from '#angular/forms';
#Component({
selector: 'my-app',
template: `
<div [outerHTML]='selectedValue | html'></div>
`,
})
export class App {
selectedValue: string = 'I already can’t wait to see what comes next.';
constructor(private cd: ChangeDetectorRef) {
}
}
#Pipe({
name: 'html'
})
export class HtmlPipe implements PipeTransform {
transform(value: string) {
return `<div>${value}</div>`;
}
}
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App, HtmlPipe ],
bootstrap: [ App ]
})
export class AppModule {}
You could write pipe for this application, like in this article:
How to allow html in return of angular2 pipe?
I'm trying to test custom validations in Angular 4 and am using the 'appForbiddenName' validation provided by angular here.
Here is my code set up:
<div class='col-xs-12 col-sm-5'>
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input class="form-control input-md"
#firstName="ngModel"
required name="firstName"
minlength="4" appForbiddenName="bob"
type="text"
placeholder="First Name"
[(ngModel)]="personal.firstName">
<div style="font-size: 12px; color: red;"
*ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"[hidden]="firstName.valid">
<div *ngIf="firstName.errors.required">*Required</div>
<div *ngIf="firstName.errors.minlength">Min length is 4</div>
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
</div>
</div>
</div>
In the app.module.ts, I've imported the ForbiddenValidatorDirective from the shared folder I've created (it's underneath /* Shared Service */) :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
/* App Root */
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
/* Feature Components */
import { PersonalComponent } from './personal/personal.component';
import { IncomeComponent } from './income/income.component';
import { BankComponent } from './bank/bank.component';
import { AddressComponent } from './address/address.component';
import { ResultComponent } from './result/result.component';
/* Routing Module */
import { AppRoutingModule } from './app-routing.module';
/* Shared Service */
import { FormDataService } from './data/formData.service';
import { WorkflowService } from './workflow/workflow.service';
import { ForbiddenValidatorDirective } from './shared/custom-validations.directive';
/* Animation Modules */
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule
],
providers: [
{ provide: FormDataService, useClass: FormDataService },
{ provide: WorkflowService, useClass: WorkflowService }
],
declarations: [
AppComponent, NavbarComponent, PersonalComponent, IncomeComponent,
BankComponent, AddressComponent, ResultComponent, ForbiddenValidatorDirective
],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm following the live example from angular.io's documentation and if I type the forbidden name "bob" in the input field, it's coming up as an error but the error message won't display.
screenshot
Other error messages, such as 'required' or 'min length is 4' are showing but not the error message for forbidden name. The input field is being highlighted red like I've styled to show it's an invalid input, but no error message for the custom validator appForbiddenName (or any other custom validation I've added).
I'm new to both Angular and Typescript, so excuse the potentially amateurish question. Someone please help, it seems trivial but I'm not sure everything Angular's doing.
Also, to build this angular app, I followed the tutorial here.
Your error is in this line:
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
It should only be firstName.errors.forbiddenName
<div *ngIf="firstName.errors.forbiddenName">Name cannot be bob</div>
And also when you are using *ngIf or *ngalert module , import the common module from the angular. This will save from any further errors regarding this.
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
..,
..,
CommonModule
],
declarations: []
I have noticed that the directive (swipeup) does not seem to be working:
I have tried using (swipeleft) and that works:
<div [#myAnimation] (swipeup)="showActionBar = false" fxFlex="56px" *ngIf="showActionBar" fxLayoutWrap fxLayoutAlign="start center"fxLayoutGap="8px" class="overview-actions">
Does anyone have a solution / work-around for this. I have looked but didn't find a solution linked to my problem.
Thank you,
J.
You can import the hammer config from #angular/platform-browser and override it. Swipe up and down are off by default as they can cause issues for the user when they are trying to scroll.
app.module.ts
import * as Hammer from 'hammerjs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '#angular/platform-browser';
export class HammerConfig extends HammerGestureConfig {
overrides = <any>{
'swipe': { direction: Hammer.DIRECTION_ALL }
};
}
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: HammerConfig
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
According to this can you try this?
var hammertime = new Hammer(document.body);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
And according to the documentation
"By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking, but you can enable them by calling:
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
Enabling vertical or all directions for the pan and swipe recognizers:
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
What I want to do is when I hover on the 'click me' button then it should show an image on the web page and when i unhover it should not show any image with the help of mouseover option
here is what i tried to do in app.component.ts and my.component.ts files
here is the code for app.component.ts :
import { Component } from '#angular/core'; //importing components from angular
import { MyComponent } from './my.component'; //importing components from my.component
#Component({
selector: 'my-app',
template: `<h1> Hi Buddy!! </h1>
<mytag></mytag>`,
directives: [MyComponent] //adding directives from mycomponents
})
export class AppComponent { }
and here is the code for my.component.ts:
import { Component } from "#angular/core";
#Component({
selector:'mytag',
template: `<button (mouseover)="<img [src]="image"> " >click me</button>` // here i tried to flash image by hovering
})
export class MyComponent{
public image="http://lorempixel.com/400/200";
myclick(klm){
console.log(klm);
}
}
so what changes should i make in the class or meta data of my.component.ts in order to do so
You can use Angular Animations module to achieve the same.
Make the below changes to your MyComponent:
import { Component } from '#angular/core'
import { trigger, state, style, transition, animate, keyframes, group } from '#angular/animations';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#Component({
selector:'mytag',
template: `<button (mouseover)="toggleOnOff()">click me</button>
<img [src]="image" [#switchImageDisplay]="showImage"/>
`
,
animations: [
trigger("switchImageDisplay",[
state("show", style({
display : 'block'
})),
state("hide", style({
display : 'none'
})),
transition('show <-> hide',[animate('0s')]),
])
]
})
export class SwitchDisplayComponent {
public image="http://lorempixel.com/400/200";
public showImage : string;
toggleOnOff(){
console.log("Previous display value is",this.showImage);
this.showImage = (this.showImage === "show") ? "hide" : "show";
console.log("Current display value is",this.showImage);
}
}
Explanation:
toggleOnOff() function sets a string variable showImage as show and hide.
In Animations we create a trigger and give it a name. In our case we have named it as "switchImageDisplay". We declared two states in the animation trigger that is "show" and "hide". In those states we defined what CSS to be used. Finally we defined a transition, which is 2 ways binded and is performed in 0 seconds. If you want the image to be hidden over a period of time increase the time.
In template code, we have binded the img tag to the animation using the code [#switchImageDisplay]="showImage". Based on the "showImage" value, the animation "switchImageDisplay"'s state is defined.
Import the import { BrowserAnimationsModule } from '#angular/platform-browser/animations'; in your app.module.ts and in the imports array as well.