TechoSwag

Hello Guys, In this blog we are going to learn about CanActivate method in angular. A ngular is a highly capable framework for the web which enables the development of web apps that are both interactive and dynamic. A fundamental component of Angular is its capability to regulate access to particular portions of an application in accordance with a user's permissions or roles. Powering this feature is the CanActivate method, which is a native type of protection in Angular and ensures that routes are safeguarded. Angular's CanActivate method can play a vital role in secure application development. Let's explore it further in this blog. CanActivate, what is it? Angular's CanActivate interface is a guard that's quite handy when it comes to securing routes. With this interface, you can control who's got access to a particular route by checking if the user meets certain conditions. For example, you could require that the user is authenticated or has the right pri

Hello Guys, In this blog you're going to learn about Angular Pipes with in-built pipes and and customized pipes with details understanding. As an Angular developer, you often come across situations where you need to transform data before displaying it to the user. For instance, you might want to format a date, display a currency in a specific format, or filter a list of items based on some criteria. This is where Angular Pipes come into the picture. Angular Pipes are built-in features that allow you to transform data easily and efficiently. What are Angular Pipes? Angular Pipes are a built-in feature in Angular that allow you to transform data in the template. A pipe takes in a value or values and returns a transformed value. The transformed value is then displayed in the template. Angular Pipes are similar to filters in AngularJS. However, they are more powerful and flexible. Angular Pipes can transform data in a variety of ways, including formatting, filtering, sorting, and more.

   In react we can achieve lazy loading after performing some steps. Let's start Step 1:- We need to import the Suspense component  - Now here I have imported Suspense component from react          import React, {Component, Suspense} from 'react'; Step 2: We need to change the way of importing Component in React - Now we are importing our other components here. I'm importing the Login and register component here. - Here we are using React.lazy() method  const Register = React.lazy(() => import('./containers/auth/register/register')) const Login = React.lazy(() => import('./containers/auth/login/Login')) Step 3: Now we need to declare our routes   Here we are using Suspence for declaring component.  <Route path={'/'} render={() =>  <Suspense fallback={<div>Loading....</div>}>             <Login />           </Suspense>} exact/>         <Route path={'/register'} render={() =>           <

  Hey Guys, in this blog we are going to learn about what is REACT, JSX and why we need to use React. Let's get started... What is the React? ReactJS is an open-source front-end Java-Script library. it's free. It's maintained by Facebook. It's used for building user interfaces especially for Single Page applications (SAP). We can also use it for handling the view layer for Mobile and Web Applications. We can also create reusable component that we can re-use in our project What is JSX ? JSX Stand for JavaScript XML In react instead of java-script we are using JSX for templating. Using JSX we can write HTML in React application. it's made easy for developers to write HTML code in react app. It automatically converts the HTML tag into react element. Why we need to use  React? It's easy to learn Performance Data Binding Native Approach Simplicity Testability How to Install and create React APP? For more info just visit below link there you can find all information s

Hello guys, in this blog we are going to learn how to setup   REACT - JS   environment in the local system Let’s get started There is  two  way we can install  React-JS 1) Using NPM Command 2) Using create-react-app In this blog, we are going to learn about the second way  create-react-app For that, we need to perform some steps Step 1: you need to install node js and npm by using the below link                                         https://nodejs.org/en/ Step 2: Install React By using the below command we can install react JS  npm install -g create-react-app After successfully install the above command now we can create react app Step 3: Create react app  for creating react app you just need to use the below command and need to enter your project name like below. create-react-app all-in-one After successfully create project you will get the below screen Step 4: Run React App For that, you need to go into a specific folder location and after that need to run the below command to run

Hello Guys, In this blog we are going to learn about Metadata in angular with examples. What is Meta Data ?  Basically meta data is used to decorate a class so that it can be configure the expected behaviors of the class in angular. Basically In angular we have total 4 type of meta data 1) Class Decorator  :- Like @Components and @NgModule 2) Property Decorator : - It's mainly used for properties inside a classes.      Ex:-  @Input() & @Output() 3) Method Decorator :- It's mainly used for methods inside a classes.      Ex:- @Hostlistner() 4) Parameters Decorator :- It's mainly used for Parameters inside a classes.      Ex:- @Inject() If you guys have any query then you can drop a mail to us on this mail id: techoswag@gmail.com

 Generally in the angular application by default, we have two environment  1) Development  2) Production Environment.  But In some cases, we need to add other environments for our application like QA and staging environment.  So let's see how we can add multiple environments in angular application for that we have to perform some steps.  Step 1:- Custom Environment File - Here For every target environment, we have to create a new file under  the environment folder  here i have created two files  evnironment.qa.ts  and  environment.staging.ts Step 2:- Custom Environment Setting - Here now you have to configure your  environment name  and new environment API URL and other settings For Example:- Step 3:- Need to Update the angular.json file - Now in the angular project you can find  the angular.json  file. in that file, you have to configure your new environment like below Here I have configure for QA environment Step 4:- Build an Application For the new environment - Now to build app