DEV Community: Angga Lesmana

ANGULAR ERROR INTERCEPTORS

Angga Lesmana — Mon, 30 Jan 2023 14:31:25 +0000

What is interceptor in angular?
This is important for us as developer know about interceptor
so In Angular, an interceptor is a mechanism for handling or transforming HTTP requests and responses globally before they reach the components. It allows you to pre-process or post-process requests and responses. It is commonly used for tasks such as adding headers, handling errors, transforming data, etc.

why I say that an interceptor is important ? because they provide a way to handle HTTP requests and responses in a centralized and reusable manner, rather than having to write the same code in multiple places. This can improve the maintainability, readability, and testability of your code. Additionally, using interceptors can simplify common tasks such as adding headers or handling errors, reducing the amount of repetitive code and making it easier to make global changes.

Now Im gonna create the simple interceptor for handle error 401 response service

the first step we should create the interceptor, we can use commandline to generate interceptor

ng g interceptor error

Angular will create the file error.interceptor.ts
like this

and will automaticly create the code interceptor like this

and we can add some code to detect error server

we will navigate the user is not login to login or to 401 page
but we already create the interceptor file we must import this to app.module.ts

And this will direct to 401 page

Share data to all component via service use NgZone, Subject

Angga Lesmana — Sun, 29 Jan 2023 14:15:55 +0000

There are some cases in Angular that you should know to send data between components or to all components, which many of us often use @Input @Output or we can use global variable and via service
here I'm gonna only explain one first through service (ngZone)
let we create some service
data.service.ts

//we should import
import { Injectable, NgZone } from '@angular/core';
import { Subject } from 'rxjs';

private dataStr = new Subject<any>()
data$ = this.dataStr.asObservable()

constructor(private ngZone: NgZone) { }


  sendDataUrl(data: any){
   return this.ngZone.run(() => {
      this.dataStr.next(data)
    } )
  }

and let we create component to send data via service
first we import and inject the service that we created earlier


import { UrlnavService } from '../../../../shared/urlnav.service';
//here myservice name UrlnavService

constructor(private urlnavService: UrlnavService){}
//inject the service

 sendDataParams(){
    this.urlnavService.sendDataUrl(this.url)
 }
//and create method to send data

trust the data will send into Subject data,
After we send data from component1, now we take the data that has been sent to the service in another component

dont forget we must import the service and inject it like in component before

import { UrlnavService } from './shared/urlnav.service';
constructor(private navurlService: UrlnavService){}

//here im getting data via ngOnInit 
 ngOnInit() {
    this.navurlService.data$.subscribe((data: any) => {
      this.url = data
      console.log(this.url)
    })
  }

then we can share data to all component via service

the other way to share data iscomingsoon

Angular transforming data use rxjs operators

Angga Lesmana — Sun, 29 Jan 2023 06:35:32 +0000

There are several cases that I am currently experiencing, namely, How to get response data from firebase whose response is in the form of an object like this

Honestly it's a bit difficult to display the data as follows, and try to transform that response use RXJS operators

this is exmple code for display data or transforming data

///write method to get that data
fetchData(){
this.nameService.namemethodfromService().pipe(map((items: any) => {
  const arrayData = [];
  for(const key of items){
 if(items.hasOwnProperty){
   postArray.push({...items[key], id: key})
 }
  }
return arrayData
})).subscribe((value: any) => {
      console.log(value);
this.dataItems = value
    })
}

the rxjs I used is, map from rxjs/operators, pipe from rxjs

please sahre if there the other ways

What Should I know for being advance angular dev

Angga Lesmana — Mon, 26 Dec 2022 04:50:09 +0000

I try to ask chatGpt for this situation,
and I got the information for that questions

To be an advanced Angular developer, you should have a strong understanding of the following concepts:

Components: Components are the building blocks of an Angular application. They are responsible for displaying content and handling user interactions.
Services: Services are used to encapsulate business logic and provide a way to share data and functionality across different components.
Routing: Routing allows you to define the different URLs that your application supports and the corresponding component that should be displayed for each URL.
Forms: Angular provides a powerful framework for building forms, including support for reactive forms and validation.
Dependency injection: Dependency injection is a way to inject a service or other object into a component or service. It is an important design pattern in Angular and allows for better separation of concerns and testability.
Observables: Observables are a way to manage asynchronous data streams in Angular. They are used extensively in Angular to handle HTTP requests and other asynchronous events.
Pipes: Pipes are a way to transform data in templates. They can be used to format dates, currency, and other types of data.
Modules: Modules are a way to organize your application and manage dependencies. They are used to define the different features of your application and provide a way to reuse code across multiple components.
Angular CLI: The Angular CLI is a command-line interface for Angular that makes it easy to create, build, and deploy your application.
Testing: Testing is an important part of the development process in Angular. You should be familiar with different types of tests, such as unit tests, integration tests, and end-to-end tests, and have experience writing and running tests for your applications.

Angular interactive and reactive

Angga Lesmana — Mon, 26 Dec 2022 04:37:52 +0000

Angular uses reactive programming principles to build interactive and responsive web applications. Reactive programming is a programming paradigm that focuses on the use of streams of data that emit values over time, and the use of operations that can be performed on those streams to create new streams of data.

In Angular, reactive programming is implemented using the

ReactiveFormsModule and the FormControl, FormGroup, and FormArray classes

, which provide an API for working with forms in a reactive way. These classes allow you to create and manipulate form controls and form groups, and to bind them to templates in a declarative way.

Reactive programming in Angular allows you to build forms that are more interactive and responsive, as you can use the FormControl and FormGroup classes to track the state of the form and the values of the form controls in real-time, and to update the template and the component class whenever the form state changes.

On the other hand, Angular also provides a template-driven approach to building forms, which is implemented using the FormsModule and the ngModel directive. This approach allows you to build forms by adding directives to the template and binding the form controls to the template using the ngModel directive. This approach is simpler and easier to use for basic forms, but it is less powerful and flexible than the reactive approach, as it does not provide the same level of control over the form state and the form controls.

how to use subject in angular

Angga Lesmana — Thu, 22 Sep 2022 08:54:06 +0000

let's implement how to use subject in angular,
first we create 2 component , component1 and component2
this is such as share data among different component,
via Serrvice,

we will create simple input and share texInput to another component

first we create function in component1.ts

in component ts

 enteredText: string;
  clickFun(){
    console.log(this.enteredText)
  }

in componenten1.html

<div class="container">
  <input type="text" [(ngModel)]="enteredText">
  <button (click)="clickFun()">click</button>
</div>

in the top input text in comp1
and text comp2 work from component2

and now create component2


<div class="container">
  <p>
    comp2 works! {{inputText}}
  </p>
</div>

and in component2 ts

  inputText : string

and now create service for share data from input component1 into component2

datasubject = new Subject<string>();

 shareDataText(data: any) {
    this.datasubject.next(data.toString()); //
  }

and dont forget for import Subject from rxjs
if we already create service
now we call the service in the app.module
exactly at providers: [NameService]

let call service in component1

  constructor(private dataservice: DataService) { }

dont forget to import the service
and now we create call in our clickbutton function

 clickFun(){
    this.dataservice.shareDataText(this.enteredText)
  }

and we call the service in component2

 ngOnInit() : void{
    this.dataservice.datasubject.subscribe(value => {
      this.inputText = value
    })
  }

and we see when we click input button in component1
data will show in component2

connect OpenVpn Server in Ubuntu

Angga Lesmana — Mon, 15 Aug 2022 16:28:29 +0000

simple step to connect our vpn office using ubutu
first we register our address / port / ip
step to register our vpn
-> open terminal and try cd into hosts
-> cd /etc
-> sudo vi hosts

and we can register our vpn there

and install openvpn server in our system
command sudo su use as root

Sign in to your Linux system on the console or via SSH and obtain root privileges.
Run the commands below to install updates and trigger a prompt to reconfigure the timezone settings.

apt update
apt upgrade
apt install tzdata
dpkg-reconfigure tzdata

Install OpenVPN Access Server from the software repository Option 1: Install via repository (recommended) The recommended method to install the OpenVPN Access Server is to use the official OpenVPN Access Server software repository. You will need to be logged on to your Linux system either on the console or via SSH, and have root privileges. Then copy and paste the commands below to add the repository to your system, and install the OpenVPN Access Server client bundle and the OpenVPN Access Server package itself.

apt update && apt -y install ca-certificates wget net-tools gnupg
wget -qO - https://as-repository.openvpn.net/as-repo-public.gpg | apt-key add -
echo "deb http://as-repository.openvpn.net/as/debian jammy main">/etc/apt/sources.list.d/openvpn-as-repo.list
apt update && apt -y install openvpn-as

if u already install that
check for run vpn service

systemctl start openvpn-server@server
systemctl status openvpn-server@server

if your system openVpn is running

● openvpn-server@server.service - OpenVPN service for server
     Loaded: loaded (/lib/systemd/system/openvpn-server@.service; enabled; vend>
     Active: active (running) since Mon 2022-08-15 14:41:44 WIB; 4h 30min ago
       Docs: man:openvpn(8)
             https://community.openvpn.net/openvpn/wiki/Openvpn24ManPage
             https://community.openvpn.net/openvpn/wiki/HOWTO
   Main PID: 15604 (openvpn)
     Status: "Initialization Sequence Completed"
      Tasks: 1 (limit: 28457)
     Memory: 1.8M
        CPU: 161ms

create variable data in button and share to another button

Angga Lesmana — Thu, 28 Jul 2022 07:34:04 +0000

I have one simple case to create variable in button html share into another button

<td style="width: 3rem">
              <button
                mat-icon-button
                type="button"
                [matMenuTriggerData]="{ data: data }"
                class="cell-action"
                [matMenuTriggerFor]="actionsMenu"
                (click)="id = data.id"
              >
                <mat-icon
                  style="font-size: 24px"
                  [icIcon]="icMoreHoriz"
                ></mat-icon>
              </button>
            </td>

see into [matMenuTriggerData] = {data: data}

  <ng-template let-data="data" matMenuContent>
    <button mat-menu-item [routerLink]="'./>
      <mat-icon [icIcon]="icPageView"></mat-icon>
      <span>Detail</span>
    </button>
    <!-- <button mat-menu-item (click)="dd(id)">
      <mat-icon [icIcon]="icArrowDownward">Canceled</mat-icon>
      <span>Unduh</span>
    </button> -->
    <!-- <button *ngIf="statusDelete"  mat-menu-item (click)="alertDialog(id)">
      <mat-icon [icIcon]="icDelete"></mat-icon>
      <span >Hapus</span>
    </button> -->
    <button *ngIf="data.status != 'Canceled'" mat-menu-item (click)="alertDialog(id)">
      <mat-icon [icIcon]="icDelete"></mat-icon>
      <span >Hapus</span>
    </button>
  </ng-template>

Should Remember Module in Go

Angga Lesmana — Sun, 17 Oct 2021 03:41:31 +0000

The important should me know in learn go that's it about golang modules,
let we try to remember how to create simple golang modules
first we create folder in our directories
create folder

mkdir go-modules
cd go-modules

okay we already create folder and in folder go-modules
and than we will create module into my github

go mod init github.com/AnggaChelsea/go-modules

go.mod will created
now we will try use go get for get http request in our go-modules project

go get github.com/julienschmidt/httprouter
go get go.uber.org/zap

Now we already create go.sum in our project go-module
we can check our go.sum using terminal

cat go.sum

we will found httprouter, request

Comment add more guys about modules from u

RXJS in consistents in 3 things

Angga Lesmana — Mon, 22 Mar 2021 14:09:04 +0000

3 things only for me
RXJS is library javascript making async calls and implements a callback, and a lot of type in rxjs, but I'm going to share just I know it there are three things in rxjs

Observable
Data Types, Observer, Schadulers, Subject
Operators

Array method
map
filter
reduce

in three things above will help us in data Streams

Thanks
Correct Me If I Wrong

How to Post data json use apikey

Angga Lesmana — Thu, 04 Jun 2020 08:09:00 +0000

I will share to you about my experience although not too much
but i hope this is important for you as javascript developer

const axios = require('axios');
const express = require('express');

const app = express();

var postData = {
'this':'this data will you post'
}

let axiosConfig = {
headers: {
'Authorization': 'Bearer your-apikey',
'Response-Format': 'JSON',
'Content-Type': 'application/json',
"Access-Control-Allow-Origin": "*",
}
};

axios.post('https://link apikey', postData, axiosConfig)
.then((res) => {
console.log(RESPONSE RECEIVED: ${postData}, res);
})
.catch((err) => {
console.log("AXIOS ERROR: ", err);
})

axios.get('https://link apikey')
.then(response => {
console.log(response.data.created_at);
});

try {

} catch (error) {

}

axios.all([
axios.get('https://link apikey'),
axios.get('https://link apikey')
])
.then(axios.spread((user1, user2) => {
console.log('Date created: ', user1.data.created_at);
console.log('Date created: ', user2.data.created_at);
}));

how to build express js code faster

Angga Lesmana — Mon, 01 Jun 2020 01:54:17 +0000

Alright. let me share how to build expressjs code faster
oke for the first you should visit a expressjs.com

we can build a expressjs code use terminal with complieted
first you should visit a link express.js and click for Getting Started and choose a express generator install express generator on your terminal npx express-generator and after that you get it

create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www

and open on your tools editor