forms

1. rective forms reset using reactiveforms.reset() . but getting null to avoid null form put in one method

call that in the clear method.need to handle undefined and null,

2.u can disable using forms also like username:["",disable:false]

bootstrap

cards style link

angular reactive forms disable sample

 form = new FormGroup({

        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),

        last: new FormControl('Drew', Validators.required)

      });

angular capture camera photo

 angular photo using camera in web application capture

snippet in visual studio

 click here

javascript

 //find method returns the first element in an array which meets

// a condition

let numbers = [-1,-2,-4,-6,0,1,2,3,4,5];

const greaterThanZero = (val) => val > 0;

numbers.find(greaterThanZero); 

//Expected output 

//1

//filter returns an array of elements that meet a condition

numbers.filter(greaterThanZero);

//Exected output.

click here

javascript key value issues separate it

 same key value in array of object list look like this

check

solution:take only value remove key value using object map (vvvimp)

dms issues

 orderentry component i have handled popup open without container

1.check select box with multiple single also for uncheck.

2 .https://bootsnipp.com/snippets/z86nx

angular material popup

 angulr material popup without component redirect click here

  openDialogWithoutRef() {

    this.dialog.open(this.secondDialog);

  }

  @ViewChild('secondDialog', { static: true }) secondDialog!: TemplateRef<any>;

          <button mat-button color="accent" (click)="openDialogWithoutRef()">

Open second dialog</button>

 <ng-template #secondDialog>

    <h2 matDialogTitle>Lovely dialog!</h2>

 

    <mat-dialog-actions align="end">

      <button mat-button matDialogClose color="primary">I

         dialogs!</button>

    </mat-dialog-actions>

  </ng-template>

angular material

 in angular material if u like to movie actions like edit and delte then you should
move the column name in ts file to the top no use if you move in html file

check here

single checkbox selection click here

here in ts give consoel.log(this.selected)

you will gate below property.

1. SelectionModel
1. changed: Subject
1. closed: false
2. hasError: false
3. isStopped: false
4. observers: []
5. thrownError: null
6. _isScalar: false
7. [[Prototype]]: Observable
2. onChange: Subject
1. closed: false
2. hasError: false
3. isStopped: false
4. observers: []
5. thrownError: null
6. _isScalar: false
7. [[Prototype]]: Observable
3. selected: (...)
4. _deselectedToEmit: Array(0)
1. length: 0
2. [[Prototype]]: Array(0)
5. _emitChanges: true
6. _multiple: true
7. _selected: [{…}]
8. _selectedToEmit: []
9. _selection: Set(1)
1. [[Entries]]
1. 0: Object
2. size: 1
3. [[Prototype]]: Set
10. [[Prototype]]: Object

<mat-form-field appearance="fill">

                  <mat-label>CONTAINER PERMIT *</mat-label>

                  <mat-select [(ngModel)]="selectedValue" >

                    <mat-option *ngFor="let cn of contaniervalues" [value]="cn.lookupDescription" >

                      {{cn.lookupDescription}}

                    </mat-option>

                  </mat-select>

                </mat-form-field>

ts:selectedvalue:any;

for add and edit on same action check vessel master in dms.web under master

compare dates in typescript

 compare two dates 

    var date=new Date().toLocaleDateString();

var date2=new Date(this.invoiceOject.invoiceDate ).toLocaleDateString();

if(date==date2){

  this.toastr.error(

    "Unable to delete,invoiceDate is not same as Today's date",    "CASH INVOICE",     { timeOut: 4000 }

  );

  return;

}

var let main difference is let dont work inside scope only not wokr outside

{let x= hello all}

you cannot call x outside only possible with var

ANGULAR material

angular material grid with checkbox check

angular material datatable

 angualr material datatable have following fetures

1. MatTableDataSource
1. data: (...)
2. filter: ""
3. filterPredicate: ƒ (data, filter)
4. filteredData: (3) [{…}, {…}, {…}]
5. paginator: (...)
6. sort: MatSort
7. sortData: ƒ (data, sort)
8. sortingDataAccessor: ƒ (data, sortHeaderId)
9. _data: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
10. _filter: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
11. _internalPageChanges: Subject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
12. _paginator: MatPaginator {_isInitialized: true, _pendingSubscribers: null, initialized: Observable, _disabled: false, _intl: MatPaginatorIntl, …}
13. _renderChangesSubscription: Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
14. _renderData: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
15. _sort: MatSort {_disabled: false, _isInitialized: true, _pendingSubscribers: null, initialized: Observable, sortables: Map(12), …}

datasource.data

different between splice and slice

to check difference between splice and slice click here 

typescript insert

 push object to an array at particular array position.

const basedm="www."+this.array3[0].value;

     this.array3.splice(1,0,{"value":basedm,"domainSimble":0,"units":0,"Include":true});

at position 2 means index 1 it will add imp

made html required by ts component

[required]="triptype"

give this value in ts triptype:any;

later handle required condition

kendo grid sum of the column

 make sme or aggarate of the particular column look at this Link

look at this data

import { process, State, aggregateBy, AggregateResult, AggregateDescriptor } from "@progress/kendo-data-query"; on constructor top

public aggregates: AggregateDescriptor[] = [

  { field: "units", aggregate: "sum" },];

 filed name wich u want to sum from grid

then pass data to this function

  const count= aggregateBy(this.array3, this.aggregates);

     

        this.totalOldCrtSAN=count.units.sum;

this.array3 is gird data and second step is final result.

ngmodel error

 when ngmodel is declared inside the form tags then get error cant use then that case 

use this tag its work absolutly fine 

 <mat-cell *matCellDef="let element">       <mat-checkbox [(ngModel)]="element.selected" [ngModelOptions]="{standalone: true}"> </mat-checkbox>

  </mat-cell>

ngmodeloption true

error:ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName"

array issue

 1.today i need to push array to an object calss i tried but got an error.

so i declared the array where exactly i need 
when check box checked(gatein(dms)) then i declared the array with name damage codes then the issue resolved.

2.2nd issue every time checkbox selected then the array become null so i given length condition then

its working fine 

finaly this is how to give array to the class.

selectDamagedata(e){debugger

    if( this.tripInformations.damagecodes.length==0){

      this.tripInformations.damagecodes=[]

    }

    this.tripInformations.damagecodes.push(e)

}

angular material issues

 in angular materilal when i am binding data to the grid view that data value become null show
and getting error without any data grid showing error later handle it and
in the code ngafterviewint made the data null show 
data not binding properly i commented code in gatein dms project(datasourcevas)

to day i have old project with version 7 so when i install in new system getting errors

so i check node version in the old system

then downgrade means uninstaled nodejs installed old system nodejs version

after npm i my code working fine

so npm i depends on nodejs version also.

create procedure snippet

 here how to create snippet of stored procedure in sql.

click here

Inserting Snippets

Insert Snippet menu allows you to choose a snippet from a categorized list of snippets.

Lets see how to use it step by step as shown below.

In your Query editor window, put the cursor where you want to insert the SQL snippet.

Next Press CTRL K + X.

Now, to generate a snippet for Stored Procedure, just double click on Stored Procedure snippet.

Usefull forms

 group for JavaScript droughts check here

link two check here

link three click here

vscode new changes

Welcome to the September 2021 release of Visual Studio Code check here. There are many updates in this version that we hope you will like, some of the key highlights include:

• Split editors within the same group - Quickly create side-by-side editors for the same file.
• Locked editor groups - Select editor types to automatically lock in an editor group.
• Better display of deleted and readonly files - Tab decorations highlight deleted and readonly files.
• Bracket pair guides - Display vertical guides to link matching bracket pairs.
• Fixed terminal dimensions - Set an active terminal's width and height.
• Jupyter Notebook improvements - Table of Contents view, full debugging support.
• Platform-specific extensions - Publish different extension versions for Windows, macOS, and Linux.
• Virtual Workspaces extension guide - Learn how to update your extension for virtual environments.
• Advanced container configuration - Tips, code samples, and videos to help configure development containers.
  
  

compare two array of objects javascript

 // IN THIS EXAMPLE WE HAVE GROUP INSERTS - DATA TO BE ADDED TO DB

// TO INSERT INTO DB EACH GROUP NAME MUST BE THE MATCHING ID

// CONATCT NAME MUST ALSO BE MATCHING ID

// THE CODE BELOW SHOWS HOW TO TRAVERSE THROGUH TWO ARRAYS AND COMPARE / ADD VALES

date formate

 calendar with date time format in dms angular project

here used owl date time picker.

sample link here

this also sample link

javascript date formate list Imp

 

const testCases = [
  new Date().toLocaleDateString(), // 8/19/2020
  new Date().toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday:"long", hour: '2-digit', hour12: false, minute:'2-digit', second:'2-digit'}),
  new Date().toLocaleDateString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit'}), // 08/19/2020 (month and day with two digits)
  new Date().toLocaleDateString('en-ZA'), // 2020/08/19 (year/month/day) notice the different locale
  new Date().toLocaleDateString('en-CA'), // 2020-08-19 (year-month-day) notice the different locale
  new Date().toLocaleString("en-US", {timeZone: "America/New_York"}), // 8/19/2020, 9:29:51 AM. (date and time in a specific timezone)
  new Date().toLocaleString("en-US", {hour: '2-digit', hour12: false, timeZone: "America/New_York"}),  // 09 (just the hour)
]

for (const testData of testCases) {
  console.log(testData)
}

Output:

10/4/2021
Monday, 10/04/2021, 12:25:32
10/04/2021
2021/10/04
2021-10-04
10/4/2021, 2:55:32 AM
02