gorakasna
This post is all about the Template Reference variable or Local Reference variable, Let me explain this with an example.
Let’s say we have some basic DOM elements in our template view. It can be anything like
Sometimes you have a requirement of local reference of repeated elements like ngFor
you can’t hard code or take them at the initial level ngOnInit life cycle hooks.
So pass them as reference
<StackLayout*ngFor="let listItem of list; let i=index;" > <StackLayout (tap)="onCheckbox(listItem, i, tv)" orientation="horizontal" horizontalAlignment="left"> <Label textWrap="true" verticalAlignment="center" text="Data"></Label> </StackLayout> <FlexboxLayout flexDirection="row" justifyContent="space-between" alignItems="center" > <TextView #tv "[(ngModel)]="listItem.field" returnKeyType="done" autocorrect="true"></TextView> </FlexboxLayout> </StackLayout> Typescript class file function
toggleCheckbox(item, index, textView: TextField) {
this.list = item;
this.inActionPNItemIndex = index;
textView.focus(); // Focused on Check the input field or dismissSoftkeyboard
}
So you can see how we event focus and close the keyboard access all method od native element
(^(\d*\.)?\d+$)?(^(\-?\+?\d*\.)?\-?\+?\d+$)
Let’s start by creating a new NativeScript project with Angular.
tns create SqlProject
# Let’s create a NativeScript app!
Answer the following questions to help us build the right app for you. (Note: you
can skip this prompt next time using the –template option, or the –ng, –vue, –ts,
or –js flags.)
? First, which style of NativeScript project would you like to use: (Use arrow k
eys)
❯ Angular | Learn more at https://nativescript.org/angular
Vue.js | Learn more at https://nativescript.org/vue
Plain TypeScript | Learn more at https://nativescript.org/typescript
Plain JavaScript | Use NativeScript without any framework
Then prompt for template
Select Hello world
Project myApp was successfully created.
Now you can navigate to your project with $ cd myApp
After that you can preview it on device by executing $ tns preview
we’re going to be using the Android keystore Plugin by Acharya Anil. This plugin can be installed by executing the following command:
This project is going to very simple. We use some take string and store it in encrypting format and then get that in normal format.
So open app.module.ts, we will inject the service in providers
import { NgModule, NO_ERRORS_SCHEMA } from “@angular/core”;
import { NativeScriptModule } from “nativescript-angular/nativescript.module”;
import { AppRoutingModule } from “./app-routing.module”;
import { AppComponent } from “./app.component”;
import { ItemsComponent } from “./item/items.component”;
import { ItemDetailComponent } from “./item/item-detail.component”;
import { SecureAndroidKeystore} from ‘nativescript-secure-android-keystore’;
// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from “nativescript-angular/forms”;
// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
// import { NativeScriptHttpClientModule } from “nativescript-angular/http-client”;
@NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent
],
providers: [
SecureAndroidKeystore
],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }
So open src/app/app.component.ts
import { Component } from “@angular/core”;
import { SecureAndroidKeystore } from “nativescript-secure-android-keystore”;
@Component({
selector: “ns-app”,
moduleId: module.id,
templateUrl: “./app.component.html”
})
export class AppComponent {
constructor(private secureAndroidKeyStore: SecureAndroidKeystore){
this.secureAndroidKeyStore.storeData(‘mykey’,’pass1234′);
this.secureAndroidKeyStore.retrieveData(‘mykey’).then(res=>{
console.log(‘message’, res);
})
}
}
You just seen how to use Android Secure plugin in a NativeScript Angular Android mobile application. While we were able to get the job done, there are better ways to do this. We can use this for storing login pin and other secure information password , logins etc.
A video version of the article can be seen below.
Hi ,
If you want to store you data securely using keystore with nativescript mobile development use nee plugin
https://market.nativescript.org/plugins/nativescript-secure-android-keystore
Describe your plugin installation steps. Ideally it would be something like:
Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-secure-android-keystore
```javascript
import { SecureAndroidKeystore } from "nativescript-secure-android-keystore";
new SecureAndroidKeystore().storeData(keystoreKeyAlias: string, data: string);
```
```typescript
import { SecureAndroidKeystore } from 'nativescript-secure-android-keystore';
private secureAndroidKeystore: SecureAndroidKeystore;
//Inside some method
this.secureAndroidKeystore = new SecureAndroidKeystore();
this.secureAndroidKeystore.storeData('mykey','pass1234');
this.secureAndroidKeystore.retrieveData('mykey').then(res=>{
this.message = res;
console.log('message', this.message );
```
| Property | Default | Description |
|---|---|---|
| Store data method | storeData(‘key’, ‘passdata’) | method for saving any data, |
| Get the data | retrieveData | Method for data getting and using which return promise |
Auth Expired Interceptor for Angular 7 using service and interceptor
Detailed code can be view at
auth -expired interceptor.ts
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
testSer(): Observable {
if (this.inProgress) {
returnObservable.create((observer) => {
this.subject.subscribe((value) => {
console.log(value);
console.log('INSIDE IF');
observer.next();
observer.complete();
});
});
} else {
this.inProgress = true;
returnthis.tokenService.getToken()
.pipe(tap((data) => {
console.log('data in progress testSer',data);
this.test = data;
this.inProgress = false;
this.subject.next('1');
}));
}
}
intercept(request: HttpRequest, next: HttpHandler): Observable {
// @ts-ignore
returnnext.handle(request)
.pipe(catchError(error => {
console.log(error);
if (error.status === 400 && error.error.errorCode == "INVALID_EXPIRED_TOKEN") {
returnthis.testSer().pipe(
switchMap(() => {
constnewToken = this.appStorage.getFromApp('accessToken');
console.log('Getting the token from session storage in expired interceptor');
request = request.clone({
setHeaders: {
Authorization:'Bearer ' + newToken
}
});
request = request.clone({url:request.url});
returnnext.handle(request);
}),
);
}
returnthrowError(error);
}))
}
token service.ts
import { Injectable } from '@angular/core';
import { tap} from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';
import {AppStorageService} from './app-storage.service';
import {throwError} from 'rxjs';
import { SERVER_API_URL } from './app.constant';
/**
* Token Service for handing token renew , refresh , authorization
*/
@Injectable({
providedIn: 'root'
})
export class TokenService {
constructor( private appStorage: AppStorageService,
private http: HttpClient
// private router: Router
) { }
/**
* @ngdoc method
* @name getToken
* @methodOf TokenService
* @description
* This method is used to get a new access token using refresh token, if refresh token is expired, take the user to signin page
* @returns {Array} It returns deferred response
*/
getToken() {
console.log('TokenService: getToken called');
this.appStorage.saveToApp('tokenAPI', 'accesstoken');
let tokenUrl: string ;
let model: any;
tokenUrl = SERVER_API_URL + 'auth/renew';
model = {
'refreshToken': this.appStorage.getFromApp('refreshToken') || null,
'accessToken' : this.appStorage.getFromApp('accessToken') || null,
};
this.appStorage.saveToApp('newTokenCalled', 'true');
return this.http.post(tokenUrl, model).pipe(tap((res: any) => {
console.log('Tap token service')
if (res && res.data === 'SESSION_EXPIRED' ) {
console.log('TokenService: SESSION_EXPIRED');
this.logout();
}
if (res.isSuccess) {
console.log('TokenService: Success');
this.appStorage.saveToApp('accessToken', res.data.accessToken);
if (res.data.refreshToken) {
this.appStorage.saveToApp('refreshToken', res.data.refreshToken );
}
this.appStorage.saveToApp('newTokenCalled', 'false');
} else {
if (this.appStorage.getFromApp('tokenAPI') === 'newAccessToken') {
this.logout();
}
}
}));
}
public handleError(error) {
return throwError(error);
}
/**
* @ngdoc method
* @name logout
* @methodOf TokenService
* @description
* This method is used for logout App
*/
logout() {
console.log('TokenService: logout called');
// this.router.navigate(['/login']);
}
}
For Further info check official Docs
https://angular.io/guide/router
.
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { RouterModule,Routes} from ‘@angular/router’;
import { HomeComponent} from ‘../layout/home/home.component’;
import { WatchComponent} from ‘../layout/watch/watch.component’;
import { AdminComponent} from ‘../layout/admin/admin.component’;
import { AdminDetailsComponent} from ‘../layout/admin/admin-details/admin-details.component’;
import { AdminListComponent } from ‘../layout/admin/admin-list/admin-list.component’;
const routes:Routes = [
{
path:”,
component: HomeComponent
},
{
path:’watch’,
component: WatchComponent,
children:[
{
path:”,
component: AdminDetailsComponent
}
]
},
{
path:’watch/admin’,
component: AdminComponent,
children:[
{
path:”,
component: AdminDetailsComponent
},
{
path:’list’,
component: AdminListComponent
},
]
}
]
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
declarations: [],
exports:[
RouterModule
]
})
export class RoutingModule { }
Check the online edit link
https://stackblitz.com/edit/angular-navigationrouting?embed=1&file=src/app/routing/routing.module.ts
If You have this error in angular request for response type “text”,
Argument of type ‘{ headers: HttpHeaders; responseType: string; }’ is not assignable to parameter of type ‘{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: “bod
y”; params?: Ht…’.
You need to set header from ….
let headers = new HttpHeaders({
‘Content-Type’: ‘application/json’,
‘Authorization’: window.sessionStorage.token
});
let authHttpOptions = {
headers : headers,
responseType: ‘text’
}
this.http.post(url, param, authHttpOptions)
.subscribe(..)
to
this.http.post(url, param, {
headers: new HttpHeaders({‘Content-Type’: ‘application/json’, ‘Authorization’: window.sessionStorage.token}),
responseType : ‘text’
})
.subscribe( …)
compiler.js:15702 Uncaught Error: Cannot assign to a reference or variable!
Solution : –
local reference and id is having same name.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
In this post, I will show you a few tips that will help you become a better React Developer. I will cover a range of things from tooling to actual code style, which can help you improve your skill with React
https://blog.bitsrc.io/how-to-write-better-code-in-react-best-practices-b8ca87d462b0
Acharya Anil Kumar Suryavanshi 