Angular 2 Images – Salesforce

Angular 2 Images from Salesforce, you can use an avatar to provide a visual representation.

angular 2 images avatar
angular 2 images avatar

An angular 2 image can be in a circular or rectangular format depending on your needs.

The size of an angular 2 image can be large, small, x-small ….

Angular 2 images developed using The Lightning Design System CSS Framework.

Angular 2 image is a native Angular 2 directive (component) developed with typescript.

If you want to setup the environment read this article.

Try Online Example at the end of article: try-it-angular-2

 

HTML File:


<div style="padding-left:10px;padding-top:10px">

<div class="slds-text-heading--label slds-m-bottom--small">Angular 2 Avatars</div>
<ngl-avatar src="assets/images/avatar1.jpg" alt="avatar 1"></ngl-avatar>
<ngl-avatar size="small" type="circle" src="assets/images/avatar2.jpg" alt="avatar 2"></ngl-avatar>

<div class="slds-grid slds-m-top--large" style="height: 50px;">
<div class="slds-align-middle slds-col">
<button type="button" nglButton="neutral" (click)="changeType()">Change Type</button>
<ngl-avatar [src]="src" [type]="type"></ngl-avatar>
Type: <code>{{type}}</code>
</div>
</div>
<br />
<div class="slds-grid slds-m-top--large" style="height: 50px;">
<div class="slds-align-middle slds-col">
<button type="button" nglButton="neutral" (click)="changeSize()">Change Size</button>
<ngl-avatar [src]="src" [size]="size"></ngl-avatar>
Size: <code>{{size}}</code>
</div>
</div>
</div>

 

TypeScrip File :


import {bootstrap}  from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {NGL_DIRECTIVES, provideNglConfig} from 'ng-lightning/ng-lightning';

@Component({
selector: 'my-app',
directives: [NGL_DIRECTIVES],
templateUrl: 'app/angular-2-images.html'
})
export class Angular2Images {


}

bootstrap(Angular2Images, [provideNglConfig()]);

 

API Documentation:


<ngl-avatar>

Input


src: Path url.

size?: 'x-small' | 'small' | 'medium' | 'large' = 'medium': Image size.

type?: 'rectangle' | 'circle' = 'rectangle': Image shape.

alt?: Assistive text.

all files from here : ng-lightning

angular 2 images