Skip to main content

Posts

Router transition animation in angular

Hello friends, This is my  tutorial on Angular. In this  tutorial ,you will learn about Angular router transition animation. Follow these steps to create animation in angular. First You need to enable the animations module by importing BrowserAnimationsModule . Write below code in your app.module.ts file import {  BrowserAnimationsModule  } from '@angular/platform-browser/animations'; Next you need to create animation.ts file and write below code . import {   animate,   query,   style,   transition,   trigger,   group, } from '@angular/animations'; export function routerAnimation() {   return trigger('routerAnimation', [     // One time initial load. Move page from left -100% to 0%     transition('-1 => *', [       query(':enter', [         style({           position: 'fixed',         ...
1 comment
Read more
Recent posts

Angular 7 Files Explanation

Hello friends, This is my third tutorial on Angular 7. In this Angular 7 tutorial ,you will learn about Angular 7 App Files Explanation. Angular 7 App Files Explanation See the structure of the Angular 7 app on  Visual Studio Code IDE  (how it looks on IDE). For Angular 7 development, you can use either Visual Studio Code IDE or WebStorm IDE. Both are good. Here, we are using  Visual Studio Code IDE .   Files used in Angular 7 app folder Angular 7 App files which are mainly used in your project are given below: src folder :   This is the folder which contains the main code files related to your angular application. app folder:  The app folder contains the files, you have created for app components. app.component.css:  This file contains the cascading style sheets code for your app component. app.component.html:  This file contains the html file related to app component. This is the template file which is used by angular to do...
Post a Comment
Read more

Angular 7 History and First App - TechLangPoint

Hello friends, This is my second tutorial on Angular 7. In this Angular 7 tutorial ,you will learn about  History and Versions of Angular   and Create Your First Angular  App .  History and Versions of Angular Angular JS 1.0 AngularJS usually referred to as “Angular.js” or Angular 1.0 It is a JavaScript-based open-source front-end web application framework. It is mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. It was initially introduced in October 2010. It is mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. Angular 2 Angular 2 is a complete rewrite from the same team that built AngularJS. Angular 2 was first introduced in October 2014. It is written entirely in  TypeScript. The drastic changes in the 2.0 v...
2 comments
Read more

Angular 7 Tutorial-1

Hello friends, This is my first tutorial on Angular 7. Before going through this Angular 7 Tutorial blog, I would like to draw your attention a bit. You must have gone through many web & mobile applications which are responsive & dynamic. It does not reload the whole page and instead reloads only the required section. For example  Gmail , you might have noticed that when you click on an email, it only reloads that e-mail in the body section and does not retrieve the rest of the page like side and navigation bar. These kind of applications are SPA (Single Page Application) and are developed using Angular. Some of the most popular examples are Netflix, PayPal etc.  In this Angular 7 tutorial ,you will learn about  What is Angular 7 ,its  Features  and its  Installation Process.  What is angular 7 ? Angular 7 is an open source JavaScript framework  which makes you able to create reactive  Single Page Applications...
4 comments
Read more