Vscode New version Changes

 

Resizing columns in Keyboard Shortcuts editor

The Keyboard Shortcuts editor is now refactored to use the new table widget, allowing users to resize the columns in the editor.

Extension management improvements

• VS Code now detects extensions installed/uninstalled through the VS Code CLI. Extensions can be activated/de-activated in the active window (instance) and will be correctly displayed in the Extensions view.

• VS Code now shows the set of extensions included in an extension that sets the extensionPack property in a separate Extension Pack tab even when the extension is not categorized as Extension Packs.

Theme: GitHub Light Theme

Negative text filtering in Problems view

You can now filter problems that do not contain specific text from the Problems view by prepending ! to the filter text.

Reporting Marketplace issues

Last month we highlighted that there's a new public repository for issues related to the Extension Marketplace. Now, VS Code's issue reporter supports creating issues in this repository.

Configure tree hover delay

The hover delay for extension contributed tree views can now be configured with workbench.hover.delay.

Emmet

The emmet.extensionsPath setting now takes in only string arrays, and can be directly edited in the Settings editor.

Search in Open Editors

You can now toggle the Search Only in Open Editors checkbox in a workspace search to change from searching the entire workspace to only searching in files that have been opened in editor tabs. This previously was enabled via an opt-in, this iteration we've enhanced the behavior with files that have not yet been loaded in the VS Code session and enabled it by default.

Control the font size of the Source Control input

You can now change the font size of the Source Control input via the new scm.inputFontSize setting.

Integrated Terminal

Terminal profiles

The terminal now supports defined profiles, which appear in the terminal's dropdown, to conveniently launch non-default shells:

VS Code will automatically detect and surface some of the more commonly used shells through this menu, but they can also be configured using the terminal.integrated.profiles.<platform> setting. With this setting, it's possible to add new profiles, change existing profiles and remove default profiles. For example:

"terminal.integrated.profiles.windows": {
  // Add a PowerShell profile that doesn't run the profile
  "PowerShell (No Profile)": {
      // Some sources are available which auto detect complex cases
      "source": "PowerShell",
      "args": ["-NoProfile"],
      // Name the terminal "PowerShell (No Profile)" to differentiate it
      "overrideName": true
  },
  // Remove the builtin Git Bash profile
  "Git Bash": null,
  // Add a Cygwin profile
  "Cygwin": {
    "path": "C:\\cygwin64\\bin\\bash.exe",
    "args": ["--login"]
  }
}

The recommended way to initially add a profile is via the Select Default Profile command, which allows creating profiles based on either an existing profile or other detected shells.

Auto detected WSL profiles and improved defaults on Windows

Along with the new profiles feature, we now auto detect WSL profiles and show them in the list by default. This can be turned off with the terminal.integrated.useWslProfiles setting.

Cygwin is also now auto detected and exposed in the Select Default Profile command and Git Bash will run as a login shell (running ~/.bash_profile).

WebGL renderer is the new default

The terminal first got the experimental WebGL renderer back in the November 2019 release, which based our calculations at the time could increase performance by up to 900% and by even more if your environment had issues with rendering using a standard 2D canvas context.

Since then, the WebGL renderer has gradually improved in stability and had its feature gap closed. We decided now is as good a time as any to make the transition, but will be watching for any issue reports.

As part of this work we also added some fallback logic. When "terminal.integrated.rendererType": "auto", the following happens:

1. The WebGL renderer will try to start up.
2. If it fails, for example due to lack of OS/browser support:
   • The canvas renderer will be enabled and the time it takes to render a frame will start to be measured.
3. If the first 20 frames are rendering slowly, for example if there are hardware issues or GPU rendering is disabled:
   • The DOM renderer will be enabled.

In the next release, we plan on removing the rendererType setting all together in favor of a much more understandable "terminal.integrated.gpuAcceleration": "auto" | "on" | "off".

Seamless terminal relaunching

Last release, we introduced automatic relaunching of terminals when an extension wants to change the environment. This release will now prevent the flickering that was caused before when the relaunch occurs. If the output of the new terminal is identical to the last, there is no feedback or distractions caused by the relaunch.

There is also a new setting to disable this automatic relaunching all together terminal.integrated.environmentChangesRelaunch.

Debugging

Improvements to breakpoints

Inline menu to edit conditions and hit count

We now show an inline menu for editing conditions and hit counts for function breakpoints. Previously the inline edit button would choose automatically what condition to edit. Now, the menu should make the flow easier and give more control to the user.

Support for all access types of data breakpoints

Now VS Code's generic debugger UI supports all data breakpoint access types defined in the Debug Adapter Protocol as context menu actions in the VARIABLES view:

• Break on Value Read: breakpoint will be hit every time a variable gets read.
• Break on Value Change: breakpoint will be hit every time a variable gets changed (this action was previously available).
• Break on Value Access: breakpoint will be hit every time a variable is read or changed.

Please note that debug extensions have to opt into this feature in order to make individual actions available. For now, only the Mock Debug extension has (simulated) support for all three access types, but we expect other debug extensions to follow soon - such as the Java extension.

Clearing a terminal before launching a debuggee

Some debug extensions allow you to launch debuggees in VS Code's Integrated Terminal. In order to keep the number of Integrated Terminals small, VS Code tries to reuse a terminal if it is not blocked by a still running command. A consequence of this approach is that previous commands and program output will remain visible in the terminal, which is sometimes confusing.

In this release, we've introduced a new feature to automatically clear the Integrated Terminal before starting a new debug session. The feature is controlled by the new setting debug.terminal.clearBeforeReusing.

JavaScript debugging

As usual, the complete list of changes can be found in the vscode-js-debug changelog.

Start Debugging and Stop on Entry

When we moved to our new debugger, last year, the Debug: Start Debugging and Stop on Entry was left behind. It once again works, and requests the debugger to pause on the first line of your Node.js program. By default it is bound to F10.

Improved handling of symbolic links

Debugging Node.js programs with symbolic links can require special flags to be passed to the program. Without these flags, breakpoints remained unbound, and it was hard to figure out what was going wrong. Now, the debugger will automatically detect these cases and provide a helpful notification.

Angular Back Button

 Angualr back button Move to previous page

ts:

goBack() {

    this.location.back();

  }

private location: Location

import { Location } from '@angular/common';

html:

  <button  (click)="goBack()"  class="btn btn-primary btn-sm">BACK</button>

NgClass binding from TS

  ANgular ngclass binding

<tr  *ngFor="let dm of extradomain ; let i = index; let first = first;let last = last;" [ngClass]="{ bg_success: first, bg_primary: !first, bg_danger : dm.domainStatus }">

in the above code for first tr bg_success class will applay. if it is last or not first bg_primary will apply.

ngstyle

Useage of Ngstyle using methods 

@Component({

  selector: 'ngstyle-example',
  template: `<h4>NgStyle</h4>
<ul *ngFor="let person of people">
  <li [ngStyle]="{'color':getColor(person.country)}"> {{ person.name }} ({{ person.country }}) (1)
  </li>
</ul>
 `
})
class NgStyleExampleComponent {

  getColor(country) { (2)
    switch (country) {
      case 'UK':
        return 'green';
      case 'USA':
        return 'blue';
      case 'HK':
        return 'red';
    }
  }

  people: any[] = [
    {
      "name": "Douglas  Pace",
      "country": 'UK'
    },
    {
      "name": "Mcleod  Mueller",
      "country": 'USA'
    },
    {
      "name": "Day  Meyers",
      "country": 'HK'
    },
    {
      "name": "Aguirre  Ellis",
      "country": 'UK'
    },
    {
      "name": "Cook  Tyson",
      "country": 'USA'
    }
  ];
}

Ngfor

call ngfor two times 

@Component({

  selector: 'ngfor-grouped-example',
  template: `
 <h4>NgFor (grouped)</h4>
 <ul *ngFor="let group of peopleByCountry"> (1)
   <li>{{ group.country }}</li>
   <ul>
    <li *ngFor="let person of group.people"> (2)
      {{ person.name }}
    </li>
   </ul>
 </ul>
 `
})
class NgForGroupedExampleComponent {

  peopleByCountry: any[] = [
    {
      'country': 'UK',
      'people': [
        {
          "name": "Douglas  Pace"
        },
        {
          "name": "Mcleod  Mueller"
        },
      ]
    },
    {
      'country': 'US',
      'people': [
        {
          "name": "Day  Meyers"
        },
        {
          "name": "Aguirre  Ellis"
        },
        {
          "name": "Cook  Tyson"
        }
      ]
    }
  ];
}

compare two arrays

 a = [{ value:"4a55eff3-1e0d-4a81-9105-3ddd7521d642", display:"Jamsheer"}, { value:"644838b3-604d-4899-8b78-09e4799f586f", display:"Muhammed"}, { value:"b6ee537a-375c-45bd-b9d4-4dd84a75041d", display:"Ravi"}, { value:"e97339e1-939d-47ab-974c-1b68c9cfb536", display:"Ajmal"}, { value:"a63a6f77-c637-454e-abf2-dfb9b543af6c", display:"Ryan"}]

b = [{ value:"4a55eff3-1e0d-4a81-9105-3ddd7521d642", display:"Jamsheer", $$hashKey:"008"}, { value:"644838b3-604d-4899-8b78-09e4799f586f", display:"Muhammed", $$hashKey:"009"}, { value:"b6ee537a-375c-45bd-b9d4-4dd84a75041d", display:"Ravi", $$hashKey:"00A"}, { value:"e97339e1-939d-47ab-974c-1b68c9cfb536", display:"Ajmal", $$hashKey:"00B"}]

function comparer(otherArray){
  return function(current){
    return otherArray.filter(function(other){
      return other.value == current.value && other.display == current.display
    }).length == 0;
  }
}

var onlyInA = a.filter(comparer(b));
var onlyInB = b.filter(comparer(a));

result = onlyInA.concat(onlyInB);

console.log(result);

Moment.js

             var todayapt = moment.utc(ele.apptDate).format('MMMM Do YYYY, h:mm:ss a');

without utc i am getting time zone + 5:30 adding so i used this utc.

Result:April 4th 2021, 1:00:00 am

Angular tips

Angular Slice 

https://github.com/angular/angular/issues/31622

today task is coming data should display reverseorder which latest created first one

use slice(0,-2) to remove last two digits

to change order of an array use reverse method

yourArray.reverse()

Change table row color in angular

ngclass based on the conditions of table index value

https://blog.angular-university.io/angular-2-ngfor/

need to write based on this examples

Angular Navigationbar

 there are different kind of navigation routing in angular.here i like to explain one of the routings

for ex: we have lefnavbar in that only selected navbar only active for that use below one

 ngOnInit(): void {

    this.activePage = this.activatedRoute.snapshot.url[0].path

    //this.id='1233433';

  }

  pageNavigate(tab) {debugger

    

    this.id=localStorage.getItem('checkOutData');

    if (tab === 'dashboard') {

      this.router.navigate(['/renew/'+this.id]);

    } else if (tab === 'profileupdate') {

      this.router.navigate(['/reissue']);

    } else if (tab === 'doctorconfig') {

      this.router.navigate(['/revoke']);

    } else if (tab === 'profileverify') {

      this.router.navigate(['/profileverify']);

    } else if (tab === 'appointmentList') {

      this.router.navigate(['/renew/2331433']);

    } else if (tab === 'patientList') {

      this.router.navigate(['/patientList']);

    } else if (tab === 'changepassword') {

      this.router.navigate(['/changepassword']);

    } else if (tab === 'login') {

      this.router.navigate(['/login']);

    }

    // this.appComponent.checkWebUrl(tab)

  }

}

html:

 <li id="" [ngClass]="{'active': activePage==='dashboard'}" (click) = "pageNavigate('dashboard')">

        <a routerLink="#"class="waves-effect waves-dark">

          <span class="pcoded-mtext">dashbaord</span>

        </a>

    </li>

Errores

 anchor tag with href # it will be redirect url in angular to change this using href

 <a href="javascript:void(0);" (click)='gotoStep1()'> <u> Edit Product </u></a>

like this

if remove href then it doesnot show click mouseover

main issue in angular