0

Angular: Saving image blobs to server

<div>
<div>save() {</div>
<div>varthat=this;</div>
<div>this.base64Image=this.croppedImage.getCroppedCanvas({</div>
<div>width:this.croppedImage.cropBoxData.width,</div>
<div>height:this.croppedImage.cropBoxData.height</div>
<div>}).toDataURL();</div>
<div>this.croppedImage.getCroppedCanvas().toBlob(function (blob) {</div>
<div>console.log(blob);</div>
<div>that.blobURL=URL.createObjectURL(blob);</div>
<div>});</div>
<div>console.log(this.blobURL);</div>
<div>this.croppedImage.destroy();</div>
<div>letformData=newFormData();</div>
<div>letprogramContent='{ "programId": '+this.mccProgramService.programId+' , "assetTypeId": 2, "contentCategoryId": 11, "isApproved": false, "contentFile": {"isDefault": "'+this.isDefault+'","fileSize": 1, "description": "'+this.alternativeText+'", "resourceTypeId": 1}}';</div>
<div>formData.append("programContentJson", programContent);</div>
<div>formData.append("uploadFile", this.file, this.fileName);</div>
<div>this.mccProgramService.postFormData(formData);</div>
<div>this.displayModal=false;</div>
<div>this.getProgramResources();</div>
<div>super.showGrowl('success', "Image Created", "Image successfully created");</div>
<div>}</div>
</div>
<div>
Advertisements
0

Angular: CORS and PolyFils.ts

This helps with CORS issues on Angular within the browser during development
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called “evergreen” browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import ‘core-js/es6/symbol’;
import ‘core-js/es6/object’;
import ‘core-js/es6/function’;
import ‘core-js/es6/parse-int’;
import ‘core-js/es6/parse-float’;
import ‘core-js/es6/number’;
import ‘core-js/es6/math’;
import ‘core-js/es6/string’;
import ‘core-js/es6/date’;
import ‘core-js/es6/array’;
import ‘core-js/es6/regexp’;
import ‘core-js/es6/map’;
import ‘core-js/es6/weak-map’;
import ‘core-js/es6/set’;
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import ‘classlist.js’; // Run `npm install –save classlist.js`.
/** IE10 and IE11 requires the following to support `@angular/animation`. */
import ‘web-animations-js’; // Run `npm install –save web-animations-js`.
/** Evergreen browsers require these. **/
import ‘core-js/es6/reflect’;
import ‘core-js/es7/reflect’;
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import ‘web-animations-js’; // Run `npm install –save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import ‘zone.js/dist/zone’; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
import ‘intl’; // Run `npm install –save intl`.
/**
* Need to import at least one locale-data with intl.
*/
import ‘intl/locale-data/jsonp/en’;
0

PrimeNG – file upload

onBasicSelect(ev) {
console.log(ev);
this.fileName=ev.files[0].name;
this.fileSize=this.formatBytes(ev.files[0].size,2);
this.file=ev.files[0];
}
save() {
letformData=newFormData();
formData.append(“programContentJson”, ‘{ “programId”: 1, “assetTypeId”: 1, “contentCategoryId”: 10, “isApproved”: false, “contentFile”: { “fileSize”: 1, “description”: “Enrollment form”, “resourceTypeId”: 1 }}’);
formData.append(“uploadFile”, this.file, this.fileName);
letheaders=newHeaders();
//headers.append(‘Content-Type’, ‘multipart/form-data’);
headers.append(‘Accept’, ‘application/json’);
letoptions=newRequestOptions({ headers:headers, withCredentials:true });
letxhr=newXMLHttpRequest();
xhr.open(“POST”, “url”, true);
xhr.withCredentials=true;
xhr.send(formData);
this.displayDialog=false;
this.getProgramResources();
0

Angular: Auto complete default select

import { Component } from ‘@angular/core’;

@Component({
selector: ‘my-app’,
templateUrl: ‘app/app.template.html’
})
export class AppComponent {

customer = {“id”: 1, “name”: “Smith”, “firstname”: “John”}; <– sets default

customers = [
{“id”: 1, “name”: “Smith”, “firstname”: “John”},
{“id”: 2, “name”: “Doe”, “firstname”: “John”},
{“id”: 3, “name”: “Smith”, “firstname”: “Jane”}
];
customerResults: Array = [];

searchCustomers(event): void {
this.customerResults = this.customers.filter(c => c.name.startsWith(event.query));
}
}

0

Angular 4 Tricks

Modify the background in html and how to set image src using Angular 4

 

<div>
<div>
<divclass="ui-g-12 ui-md-12 " [ngStyle]="{'background-image': getUrl(), 'background-size': 'contain'}"></div>
<div></div>
</div>
<div>
<div><img [src]="net1Image"></div>
</div>
0

Angular: Grab Form Data

</div>
</div>
<div>
<div>
<div><p-dialog header="Edit comment" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [closable]="false"></div>
<div><form [formGroup]="editCommentLogForm"></div>
<div>
<divclass="ui-grid ui-grid-responsive ui-fluid"></div>
<div></div>
<div>
<divclass="ui-grid-row"></div>
<div></div>
<div></div>
<div><textarearows="5"cols="100"pInputTextareaautoResize="autoResize"id="commentLogMessage"formControlName="commentLogMessage" [ngModel]="selectedComment.comment"></textarea></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div><p-footerclass="modal-footer"></div>
<div>
<divclass="ui-dialog-buttonpane ui-helper-clearfix"></div>
<div><buttontype="button"pButtonicon="fa-check" (click)="saveComment(selectedComment)"label="Save"></button> or <spanclass="cancel-button" (click)="cancel()">Cancel</span></div>
<div></div>
</div>
<div></p-footer></div>
<div></form></div>
<div></p-dialog></div>
</div>
</div>
<div>
</div>
<div>
<div>
<div>saveComment(comment:CommentLog){</div>
<div>letformData=this.editCommentLogForm.value;</div>
<div>letformComment=formData['commentLogMessage'];</div>
<div>comment.comment=formComment</div>
<div>}</div>
</div>
</div>
</div>
<div>
</div>
<div>[ngModel]="selectedComment.comment" == only pulls data</div>
<div></div>
<div>[(ngModel)]="selectedComment.comment == pulls and can update data</div>
<div>
<div>
<div>
0

Angular/PrimeNG: P-DataList

Using P-datalist to display and manipulate data can be done as follows

 

<p-dataList styleClass="action-panel" [value]="action_list" [paginator]="false" [rows]="5">
    
	<ng-template let-action pTemplate="item">
        <div class="ui-g ui-fluid action-item">
            <div class="ui-g-6 ui-lg-6 ui-md-8 ui-sm-12">
            	<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
            	<span>{{action_list.desc}}</span>
            </div>            
            <div class="ui-g-2 ui-lg-2 ui-md-4 ui-sm-12">
            	<span>Expires: {{action_list.date | date: 'MM/dd/yyyy'}}</span>
            </div>	
            <div class="ui-g-4 ui-lg-4 ui-md-12 ui-sm-12">
            	<div class="pull-right">
	            	<button pButton type="button" (click)="accept(action)" label="Accept"  class="next-button"></button>
	            	<button pButton type="button" (click)="decline(action)" label="Decline"  class="prev-button"></button>
	            	<span>&nbsp;&nbsp;Or&nbsp;&nbsp;</span>	
	            </div>	
            </div>	
        </div>
    </ng-template>
	
</p-dataList>

 

This lets you display contents of the actionList variable

 action_list: Action[] = [];
this.action_list.push({id: 1, desc: "You have an offer from MSAS CDC 1 San Diego", expire: "2017-11-10"});
this.action_list.push({id: 2, desc: "You have an offer from Air Force San Diego", expire: "2017-11-10"});
export class Action {
public id: number;
public desc: string;
public expire: string;
}
0

Angular: Some good methods

Some cool methods in Angular i encountered

//Check if it is an array
if (idsToString instanceof Array) {
        idsToString = idsToString.filter(function (entry) { return entry != ''; });


//Split a string into arrays 
      this.submitUserProfile.regionIds = idsToString.filter(function (n) { return n != null }).join();
      }


//remove empty entries from array

 idsToString = idsToString.filter(function (entry) {

          return entry != '';

        });


//Get a service call response 

this.Service.getUserType().subscribe(val => {
      val.payload["userType"].map(function (reg) {
        this.userTypeItems.push({ label: reg.name, value: reg.id });

      }.bind(this))
    });