how to find duplicate item from array using multiple object keys in angular or javascript

how to find duplicate item from array using multiple object keys

There is a way to find based of multiple key find duplicate records in angular or javascript

 
getDuplicate(items, keys) {
        let duplicates = [];
        for (let i = 0; i < items.length; i++) {
            let matchkey = 0;
            for (let j = 0; j < keys.length; j++) {
                if ((i < (items.length - 1)) && items[i + 1][keys[j]].toLowerCase() === items[i][keys[j]].toLowerCase()) {
                    matchkey++;
                }
            }
            if (matchkey === keys) {
                duplicates.push(items[i]);
            }
        }
        return duplicates;
    }

Example:
const duplicate= this.getDuplicate(CounterParty, ['OperatorId', 'TCID']);

angular form control and formarray sort using perticular key asc and desc

angular form control and formarray sort using perticular key asc and desc

there are three diffrent way to sort data form control and form array in angular

1). FormArray sorting
   
 sortFormArray(array: any, args, type = 'asc') {
        if (array !== undefined) {
            return array.controls.sort((a: any, b: any) => {
                const aValue = a.controls[args].value;
                const bValue = b.controls[args].value;
                let condition1 = aValue > bValue;
                let condition2 = aValue < bValue;
                if (type === 'asc') {
                    condition1 = aValue < bValue;
                    condition2 = aValue > bValue;
                }
                if (condition1) {
                    return -1;
                } else if (condition2) {
                    return 1;
                } else {
                    return 0;
                }
            });
        }
        return array;
    }

Example:
const Address= FormArray();
sortFormArray(Address, 'CountryID','asc');

2).sort list data 

getsort(List?) {
        if (List) {
            return List.sort((a, b) => (a > b) ? 1 : -1);
        } else { return null; }
    }

Example:

getsort(this.items);
getsort(this.items);

3).sorting using lodash
 
 getsortNew(List?,key:[],type:[]) {
        if (List) {
            return lodash.sortBy(List, key,type);
        } else { return null; }
    }

Example:
getsortNew(this.items,['CountryID'],[asc]);
getsortNew(this.items,['CountryID'],[desc]);

how to convert json to xml in angular

var obj={'name':raj,'address':{'add':'skg'}}

 JsontoXML(obj) {
    var xml = '';
    for (var prop in obj) {
      xml += obj[prop] instanceof Array ? '' : "<" + prop + ">";
      if (obj[prop] instanceof Array) {
        for (var array in obj[prop]) {
          xml += "<" + prop + ">";
          xml += this.JsontoXML(new Object(obj[prop][array]));
          xml += "</" + prop + ">";
        }
      } else if (typeof obj[prop] == "object") {
        xml += this.JsontoXML(new Object(obj[prop]));
      } else {
        xml += obj[prop];
      }
      xml += obj[prop] instanceof Array ? '' : "</" + prop + ">";
    }
    var xml = xml.replace(/<\/?[0-9]{1,}>/g, '');
    return xml
  }

and finally download json into file

 downloadXMLFile(xml, tradeID) {
    const blob = new Blob([xml], { type: 'application/xml;charset=UTF-8' });
    FileSaver.saveAs(blob, tradeID + '.xml');

  }

How to convert xml to json in angular

There are many times you required to convert json from xml and dowloard in json file . there is custom code for generate json from xml

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
@Injectable({
  providedIn: 'root'
})
export class XmlToJsonService {

  constructor() { }
  xmlToJson(xml) {

    // Create the return object
    var obj = {};

    if (xml.nodeType == 1) { // element
      if (xml.attributes.length > 0) {
        obj = {};
        for (var j = 0; j < xml.attributes.length; j++) {
          var attribute = xml.attributes.item(j);
          obj[attribute.nodeName] = attribute.nodeValue;
        }
      }
    } else if (xml.nodeType == 3) { // text
      obj = xml.nodeValue;
    }

    // do children
    if (xml.hasChildNodes()) {
      for (var i = 0; i < xml.childNodes.length; i++) {
        var item = xml.childNodes.item(i);
        var nodeName = item.nodeName;
        if (typeof (obj[nodeName]) == "undefined") {
          if (nodeName == '#text') {
            obj = this.xmlToJson(item);
          } else {
            obj[nodeName] = this.xmlToJson(item);
          }
        } else {
          if (typeof (obj[nodeName].push) == "undefined") {
            var old = obj[nodeName];
            obj[nodeName] = [];
            obj[nodeName].push(old);
          }
          obj[nodeName].push(this.xmlToJson(item));
        }
      }
    }
    return obj;
  };

  downloadFile(jsonObject, tradeID) {
    const blob = new Blob([JSON.stringify(jsonObject)], { type: 'application/json' });
    FileSaver(blob, tradeID + '.json');
  }
}

and there is way to call this method

getJson(item: any) {
    console.log(item);
    this.contractService.GetTradeDetail(item.TradeID, item.ID, this.userId, 'WithPrevious').then((res: any) => {
      if (res['status'] === 200) {
        this.EditForm(res).then((xdata) => {
          const parser = new DOMParser();
          const isDownload = true;
          const xml = '<root><my>hello</my></root>';
          const XMLString = parser.parseFromString(xml, "text/xml");
          const JSONString = this.xmlToJsonService.xmlToJson(XMLString);
          if (isDownload) {
            this.dealFastXMLService.generateXml(this.trademodel, true, isDownload);
            this.xmlToJsonService.downloadFile(JSONString, this.trademodel.ReferenceNo);
          }
          
        });
      }
    });
  }

How to create Textbox auto size and after type some line autometically added scroll and then remove text autometically becomes in previous state

How to create Textbox auto size and after type some line autometically added scroll

How to create Textbox auto size and after type some line autometically added scroll and then remove text autometically becomes in previous state

Code:-

// Usage example: <textarea autoresize></textarea>

import { ElementRef, HostListener, Directive, AfterContentChecked } from '@angular/core';

@Directive({
    selector: 'textarea[autosize]'
})

export class AutosizeDirective implements AfterContentChecked {
    @HostListener('input', ['$event.target'])
    onInput(textArea: HTMLTextAreaElement): void {
        this.adjust();
    }
    constructor(public element: ElementRef) {
    }
    ngAfterContentChecked(): void {
        this.adjust();
    }
    adjust(): void {
        const element = this.element.nativeElement;
        const maxsize = 188;
        const bottompadding = 1;
        if (element.scrollHeight <= maxsize) {
            element.style.overflow = 'hidden';
            element.style.height = 'auto';
            element.style.height = (element.scrollHeight - bottompadding) + 'px';
        } else {
            element.style.overflow = 'auto';
            element.style.height = maxsize + 'px';
        }
    }
}

Uses:-

 <textarea matInput placeholder="Address" cols="20" id="Address" name="Address" formControlName="Address"
                  rows="1" maxlength="500" autosize></textarea>

How to Create Lowercase convert autometically in angular using directive (for textbox , text control)

How to Create Lowercase convert autometically in angular using directive

1).Directive code

// Usage example: <input lowercasedirective />

import { ElementRef, HostListener, Directive, AfterContentChecked } from '@angular/core';

@Directive({
    selector: 'input[lowercasedirective]'
})

export class LowercaseDirective implements AfterContentChecked {

    @HostListener('keyup', ['$event.target'])

    onInput(input: HTMLInputElement): void {
        this.lowercase();
    }
    constructor(public element: ElementRef) {
    }
    ngAfterContentChecked(): void {
        this.lowercase();
    }

    lowercase(): void {
        const element = this.element.nativeElement;
        if (element.value != null && element.value != '') {
            element.value = element.value.toLowerCase();
        }

    }
}

How to use in html

2).Use in html

<input matInput type="text" [readonly]="false" formControlName="EmailID" id="EmailID"

                  name="EmailID" class="form-control" maxlength="50" lowercasedirective />

2).Import in Moduel

a).declare

import {LowercaseModule } from '../../../directive/lowercase/lowercase.module';

b).import

LowercaseModule 

How to auto load data on mat-select scroll (mat-select infinite scroll)

step1 :Install plugins

npm i ng-mat-select-infinite-scroll

reference side:

https://dev.to/haidarz/adding-infinite-scroll-functionality-to-angular-material-select-component-1lho

step2:declare path

import { BehaviorSubject, Observable } from 'rxjs';

import { scan } from 'rxjs/operators';

step3:declare variables

limit = 10;

offset = 0;

options = new BehaviorSubject<string[]>([]);

options$: Observable<string[]>;

step4:call observable on constructor

this.options$ = this.options.asObservable().pipe(

scan((acc, curr) => {

return [...acc, ...curr];

}, [])

);

step5:call method when require for initialise like on init()

this.getTapCodeList();

step6:write defination of method

getNextBatch() {

const result = this.tapCodeList.slice(this.offset, this.offset + this.limit);

this.options.next(result);

this.offset += this.limit;

}

step7:api call for data

getTapCodeList(): Promise<any> {

return new Promise((resolve, reject) => {

const _tradingEntityID = this.newTradeIOTForm.get('TradingEntityID').value;

this.tadigcodeservice.getTadigCode(_tradingEntityID, '00000000-0000-0000-0000-000000000000', 'All', this.userId)

.then(res => {

const _tempData = res.result.AllTadigCode;

if (_tempData) {

this.tapCodeList = _tempData.map(function (ele) {

return { 'TadigId': ele.TadigId, 'TadigCode': ele.TadigCode };

});

}

this.getNextBatch();

})

.catch(error => {

this.loggerService.error(error);

});

this.counterPartyList = [];

return resolve(this.tapCodeList);

});

}

step 8: html side changes

<mat-form-field class="full-width">

<mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" multiple

formControlName="CounterPartyTapCode" [complete]="offset === data?.length"

(selectionChange)="changeTapCode($event, true)">

<mat-option *ngFor="let option of options$ | async" [value]="option.TadigId">

{{option.TadigCode}}</mat-option>

</mat-select>

<mat-placeholder>Select TAP Code<span class="raw-red">*</span>

</mat-placeholder>

</mat-form-field>

</div>

'ng' is not recognized as an internal or external command/angular cli ng commands not working

'ng' is not recognized as an internal or external command / angular cli ng commands not working

In this post, I’m going to list the most common errors you may encounter while getting started with Angular. For each error, I’m going to explain what it means and how to solve it

This error is simply telling you that Angular CLI is either not installed or not added to the PATH. To solve this error, first, make sure you’re running Node latest or higher. A lot of errors can be resolved by simply upgrading your Node to the latest stable version

1).Open up the Terminal on macOS/Linux or Command Prompt on Windows and run the following command to find out the version of Node /node package manager / angular cli

a).node js version

node --version

node -v

a).node package manager version

npm -v

c).angular cli version

ng v

2).Then you need to install angular cli at globally

npm install -g @angular/cli

3). then also note run the you should set up your local computer envarment path