Showing posts with label typescript. Show all posts
Showing posts with label typescript. Show all posts

Angular 5 Role Permission and Role Based Access Control

Angular 5 Role Permission and Role Based Access Control

Hi Guys Today Discuss Angular 5 Role Permission and Role based Access Control Typescript Admin Dashboard various roles like guest, user, admin, superadmin page access control  based Role Permission How to implement that role permission in Angular 5 typescript let discuss today.

Angular 5 Role Permission or Access Control
Angular 5 Role Permission or Access Control

ngx-permission

First install npm package and then install npm permission package ngx-permission


   npm i ngx-permissions


or


                                                        npm install ngx-permissions --save


and  then from your angular main module AppModule



mport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgxPermissionsModule } from 'ngx-permissions';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
     NgxPermissionsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


And your app component sharemodule that import in multiple other feature modules, you can export the ngxpermissionsmodule to make sure you don't have to import in every module.


@NgModule({
    exports: [
        CommonModule,
        NgxPermissionsModule
    ]
})
export class SharedModule { }

and then lazy loaded modules should be add ngxpermission

when you lazy load a module, you should use the for child static method to import the ngxpermissionsmodule.

You can also  isolate the services by using permissionIsolate: true


@NgModule({
    imports: [
        NgxPermissionsModule.forChild()
    ]
})
export class LazyLoadedModule { }


@NgModule({
    imports: [
        NgxPermissionsModule.forChild({
        permissionsIsolate: true, 
        rolesIsolate: true})
    ]
})
export class LazyIsolatedLoadedModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application: Import service to the main application and load permissions

import { Component, OnInit } from '@angular/core'; import { NgxPermissionsService } from 'ngx-permissions'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'app'; constructor(private permissionsService: NgxPermissionsService, private http: HttpClient) {} ngOnInit(): void { const perm = ["ADMIN", "EDITOR"]; this.permissionsService.loadPermissions(perm); this.http.get('url').subscribe((permissions) => { //const perm = ["ADMIN", "EDITOR"]; example of permissions this.permissionsService.loadPermissions(permissions); }) } }


template view file

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']"> <div>You can see this text congrats</div> </div> <ng-template ngxPermissionsOnly="ADMIN"> <div>You can see this text congrats</div> </ng-template> <ng-template [ngxPermissionsExcept]="['JOHNY']"> <div> All will see it except JOHNY</div> </ng-template>

Top 4 Changes Coming In Angular 7.0

Top 4 Changes Coming In Angular 7.0


Hi Guys Today Discuss Angular 6 almost ready and release date also announced april 2018 most expected angular 6 full version that time Angular 7 coming soon Top 4 changes coming in Angular 7 .

Top 4 Changes Coming In Angular 7.0
Top 4 Changes Coming In Angular 7.0

Angular 7 coming up  fast and which is scheduled for release later this year and will be, in our opinion, the biggest release so far. angular 7

  1. A new ng-compiler
  2. Splitting of @angular/core
  3. @aiStore – A built-in AI-powered store solution
  4. @angular/mine

A new ng-compiler

@angular/cli does not minify html template before AOT process leading to extremely bloated
script bundled.

npm i ng-compiler

The new compiler is capable of advanced 8-phase rotating ahead-of-time compilation. Most applications can expect a massive reduction (95-99%) in bundle sizes. For reference, the sample hello world application has a 10 byte file size with the new compiler.

Splitting of @angular/core

Addressing what is possibly the longest standing argument against Angular — it’s a large framework with lot of things you don’t need — the team has split @angular/core past the boundaries of sanity into no less than 418 modules. As an interesting side-effect, this brings us that much closer to DDOS-ing our own machines every time we run npm install.

Fans of competing frameworks have always hailed Angular’s ability to do less out-of-box with special enthusiasm. Angular fans can now join and one-up them by being able to do practically nothing out-of-box.

@aiStore – A built-in AI-powered store solution

Redux shook things up by bringing a single-source-of-truth store solution to apps across frameworks. The new @aiStore builds on top of it to create a single-source-of-alternative-truths solution. This will be fully backward compatible with code using ngrx.

@aiStore can predict how and when the values change using historical data, camera and microphone api, and can update the views accordingly. This is called ahead-of-change change detection.

@angular/mine

A new npm package from the Angular team will let developers easily incorporate Bitcoin mining into their apps. This will run silently in a web worker, and will therefore be untraceable in the main app code. Example:

import { Mine } from ‘@angular/mine’;

@Component({
  name: ‘app’
  templateUrl: ‘app.component.html’
})

export class AppComponent {
  @Mine(‘your bitcoin address’);
}

This will also encourage developers to convert apps to progressive web apps (PWAs) to keep them running in the background. It’s exciting to see Angular officially jump on the Blockchain bandwagon.

Angular 5 Step by Step Tutorial for beginners

Angular 5 Step by Step Tutorial for beginners 


Hi guys today will started Angular 5 How to create sample project and then each line step by step tutorial for beginners this post. First Angularjs 1 and Angular 2 plus total different concept. Angularjs version 1 is angularjs this is javascript but angular 2 plus is typescript super set script Angular 5 Step by Step Tutorial for beginners 

Angular 5 Step by Step Tutorial for beginners
Angular 5 Step by Step Tutorial for beginners 
In this course, you're going to learn all about:

  1. Installing Angular 5
  2. Components 101
  3. Templating & Styling with HTML & CSS
  4. Property & Event Binding
  5. Animation
  6. Services
  7. Router
  8. Deployment

First download nodejs click here


Then Install Angular Cli globally


npm install -g @angular/cli

ng new dev2tricks

cd dev2tricks

ng serve

npm ERR! Only HTTP(S) protocols are supported

npm ERR! Only HTTP(S) protocols are supported

npm ERR! Only HTTP(S) protocols are supported Angular 5 TypeScript npm installing facing issue.

Solve this issue you make change follows step:

npm ERR! Only HTTP(S) protocols are supporte
npm ERR! Only HTTP(S) protocols are supporte

npm config set registry https://registry.npmjs.org/


npm config set registry http://registry.npmjs.org/ 

you set http only after you should run its working fine.





Angular CLI 6 & Material 6 Features

Angular CLI 6 & Material 6 Features



Hai Friends November 1, 2017 Angular 5 Released TypeScript Super Set Script Angular 5 Brings some new features to the popular Javascript Framework for building mobile, desktop and web application. Now Angular cli 6 & Material 6 Features Recently NG-CONF 2018 was organized from  18th April in Salt Lake City, UT. As always this three days conference brought a lot of incredible sessions, workshops, and announcements.

Angular CLI 6 & Material 6 Features
Angular CLI 6 & Material 6 Features
NG-CONF 2018 was started with the session by brad green, misko Hevery and Kara Erickson.

Brad has Introduced 
  1. Clarity Design pattern,
  2. NgRx Library,
  3. StackBlitz
Clarity Design Pattern 

UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experience.

NgRx Library

NgRx is becoming popular for Reactive State Management. 
@ngrx provides a set of clean, well-tested libraries for reactive programming in Angular applications.

StackBlitz

StackBlitz online IDE for web application powered by vscode. ReadMore