Sets or gets the autoOpen property.

import { Component } from "@angular/core";
 
@Component({
    selector: 'app-root',
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [autoOpen]="true">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

Sets or gets the html property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [html]="'custom HTML string'">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

Sets or gets the isModal property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [isModal]="true">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

enum LoaderImagePosition {
     center,
     top,
     bottom
}

Sets or gets the imagePosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [imagePosition]="'top'">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [rtl]="true">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

Sets or gets the text property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [text]="'Loading files...'">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

enum LoaderTextPosition {
     top,
     bottom,
     left,
     right
}

Sets or gets the textPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [textPosition]="'left'">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60" [theme]="'energyblue'">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60">
        </jqxLoader>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the user creates loader for the first time.

Code examples

Bind to the create event of jqxLoader.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader (onCreate)="Create($event)"
             [width]="100" [height]="60">
        </jqxLoader>
    `
})
 
export class AppComponent {
    Create(event: any): void 
    {
        // Do Something
    }

    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60">
        </jqxLoader>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myLoader') myLoader: jqxLoaderComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myLoader.close();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxLoader #myLoader 
             [width]="100" [height]="60">
        </jqxLoader>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myLoader') myLoader: jqxLoaderComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myLoader.open();
    }

    
}