Angular is a TypeScriptbasedfront–endopen–sourceWebApplicationFramework led by the Angular Team at Google and also by a communityofindividuals and corporations. Angular is a complete rewrite of Angular JS. The lateststableversion of Angular is Angular8. But you know it is one of the most evolving front-end frameworks and our irctc.co.in website was changed to Angular recently.

• Angular Cli Cheat Sheet Excel
• Angular Cli Cheat Sheet For Beginners
• Angular Cli Cheat Sheet Example
• Angular Cli Cheat Sheet Pdf

Introduction Here’s a cheat sheet that will help you find the commands you need for most of the things that you would want to do with the Angular CLI. For a brief introduction to the Angular CLI you can explore this tutorial. Learn about Angular CLI, a powerful tool that can dramatically reduce the amount of time you spend coding, while improving the quality of the code. Kevin Chisholm – Blog. Command Prompt Cheat Sheets. Here are a few cheat sheets to help you learn the most important commands to use with the command prompt. Npm install -g @storybook/cli Go to angular project then execute. Sb init Remove angular stories examples; Create a new story. Ng g component test Create story file.

There are a lot of expectations for the next version of Angular since it’s going to have a new Compiler called IvyRenderer. And also there are a lot of changes involved in Angular 9. ng-Conf is one of the world’s largest angular conference which takes place every year. And recently they have released an Angular 9 Cheat Sheet which involves the changes that are going to apply in Angular 9.

In this blog, we’ll see some of the changes that are going to happen in Angular 9.

Angular Cheats

ngForm replaced with ng-Form

The selector ngForm has been replaced with ng-Form and it can be easily replaced in all your occurrences of your respective application.

Angular Cli Cheat Sheet Excel

You have to manually do this change since ng update won’t do this respective change.

//Previous Version

<ngForm #myForm=”ngForm”>

//Angular 9

<ngForm #myForm=”ng-Form”>

Template Only Variable Errors

From Angular 9, it will throw you an error when you assign values to template-only variables like,

*ngFor = “let item of items” //item undefined

So hereafter, you also need to definethevariables which are used in the templates to the necessary scripting file.

Template Class Binding Fixes

This is one of the interesting changes which has been done in Angular 9. Inline class binding and [class] bindings now worktogether. In the previous versions, when the template is rendered, it will pick the last binding and it will render the respective view.

Consider the following example,

<p [class]=”‘bold'” class=”{{‘red’}}”>

Welcome to TechMeet360!

</p>

So if you see the above code snippet, it will render the HTML which contains “red” class and not the bold class. But from Angular 9, it will render the HTML that will be both “bold” and “red”.

Module With Providers

From Angular 9, you need to specify a generictype but it was optional in the previous version.

//Previous Versions

@NgModule({….})

export class TestModule{

static forRoot(randomConfig: RandomConfig): ModuleProviders{….}

}

//Angular 9

@NgModule({….})

export class TestModule{

static forRoot(randomConfig: RandomConfig): ModuleProviders<SomeModule>{….}

}

And you don’t have to do these changes manually as ng update takes care of making these changes for you.

@Component and @Directive Host Binding directive

In previous versions, only the properties with explicit field decorators like @HostBinding will be inherited but in Angular 9 you would be able to inherit the @Component and @Directive decorators.

@Component({

selector: ‘myComponent’,

template: ‘<h2></h2>’,

host:{

[key: string]: string;

}

})

TS Compiler options

In angular 9 CLI, a new flag has been introduced called –strict which is used to create your applications extremely powerful by maintaining safety. And also if you want to use this flag for your existing applications, turn on the below flags in order to resolve the existing issues.

• noImplicitAny
• noImplicitReturns
• noImplicitThis
• noFallThroughCasesInSwitch
• strictNullChecks

Removed API’s

Most of the unused API’s have been removed and some have been deprecated.

More info => https://next.angular.io/guide/updating-to-version-9#new-removals-of-deprecated-apis

Conclusion

These are some of the changes that are going to happen in Angular 9. It’s one of the major releases and it may happen by end of this December. Recently Igor Minar tweeted about the status of Angular 9.

We are in the final stages of polishing the Angular v9 release with Ivy on by default. We received lots of great feedback so far from ppl that tried the RC. If you’d like to help work out the last kinks please test the RC: https://t.co/Du8txIpiGz thanks!

— Igor Minar (@IgorMinar) November 26, 2019

And also in ng-Conf 2019 keynote, they mentioned that the helloworldapplication size changes from 151 kb to just 14 kb. Yes! it is evolving!

Eagerly Waiting for this release!

Who else?

Happy Coding!

Cheers! 🙂

REFERENCE: ng-Conf angular 9 Pre Release Cheat Sheet

Sparkitecture is a series of solutions aimed at cutting down development time at project launch by providing a ready-to-use fullstack template

Table of Contents

• Getting Started
  • Prerequisites
    • Installing Prerequisites
  • Setting Up Sparkitecture
    • Running the web app
• Common Operations
  • Adding the Command Template
• Mobile
  • App Store
  • Play Store

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

What things you need to install the software and how to install them

Installing Prerequisites

The following series of examples will guide you in getting Sparkitecture working in your development enviorment for the first time.

Installing Node.js and npm

• Navigate to the Node site
• Download and install the latest stable version (this installs npm as well)

You can run the following commands to check the that the installation was successful and view the current version.

Installing the Angular CLI

To install the Angular CLI run the following command in your terminal window.

You can run the following command to check the that the installation was successful and view the current version.

Setting Up Sparkitecture

Getting source code and connecting to TFS

• Open Visual Studio and navigate to “Team Explorer”
• Click the green plug at the top of the window
• Click “Manage Connections” just below the plug
• Select “Connect To a Project…”
• Click “Add TFS Server” and enter “tfs.sparkhound.com”
• Click “Add”
• Open the “Sparkhound” repository
• Click “Sparkitecture”
• Click “Connect”
• Click “Sync” in the “Team Explorer” window
• Click “Fetch”
• Click “Pull”

Setting up the Server solution (Web Project)

• Open the “Server” solution in Visual Studio
• Open a command terminal
• Change the directory to the “ClientApp” folder where the “node_modules” folder resides

Run the following commands:

This installs all of the project dependencies via npm

This builds the Angular project and will notify you if any errors occurred in the build

Setting up a local database

• Open SSMS (SQL Server Management Studio)
• Connect to your local instance
• Right click the “Database” folder
• Click “New Database…”
• Enter “Sparkitecture” as the “Database name”
• Click OK
• In Visual Studio locate the “Database” project
• Open the “PublishProfiles” folder
• Double click the file “local.publish.xml”
• Edit the target data source to match your local instance if necessary
• If data source was modified save your publish profile
• Click “Publish”

Your local Sparkitecture database schema should now match that of source control

Running the web app

• In Visual Studio, ensure the “Web” project is set as the startup project
• Press F5 to run

Running with the Angular CLI

• Open a terminal and ensure directory is set to the “ClientApp” folder
• Run the following command

• In Visual Studio press F5

This builds and serves your app, rebuilding on file changes

Common Operations

Create a New Component

• Open a command prompt
• Change directory to the component folder

• Replace [componentName] and type the following command in your command prompt:

• A new folder with you component name will be created under the component folder
• This new folder contains 4 files:
  • componentName.component.ts
    • This is a Typescript file which will contain client-side logic
  • componentName.component.spec.ts
    • This is a Karma test file
      • This file can be removed if tests will not be written for this component
  • componentName.component.scss
    • This is a Sassy CSS file where you can add Sass or CSS exclusive to this component
  • componentName.component.html
    • This a HTML file where the UI is created
• This command also imports and declares your new component in app.module.ts

Adding a Search Row

• Create Table in SSMS
• Create Table in DatabasedboTables
• Create View in DatabasedboViews
• Publish Profile from DatabasePublishProfiles
• Create SearchRow Class in CoreModelsSearchRows
• Above each searchable string property add:

• Create Base Class in CoreModels
• Add a Dictionary Mapping Reference to DataAccessSearchSearchTypeToEntityFrameworkTypeProvider.cs
• Add DBSet For SearchRow Class in DataAccessContextsSparkitectureDBContext.cs
• Create new Component folder for search page in WebClientAppsrcappcomponents
  • The new folder will need the associated .ts .html and .scss files which can be found in WebClientAppsrcappcomponentsexamplessearch-grid-format-example folder
  • You can copy these files and paste them into the folder you created
    • Change the search-grid-format-example portion of the name to the name of the new folder
• In the new .ts file remove any unnecessary code and update the Component Decorator with the correct name and update the Class name
• In the new .html file remove any unnecessary code and update the title and list
• Import and add an Export to WebClientAppsrcappcomponentsindex.ts
• Import and add a Declaration to WebClientAppsrcappapp.module.ts
• Import and add routing functionality to WebClientAppsrcappapp-routing.module.ts

Adding the Command Template

• In the project root locate /tools/item templates/Command.zip
• Copy the file and paste it into:

Now the Sparkitecture Command templates have been added to Visual Studio!

Using the Command Template

• Open a project in Visual Studio
• Right-click the folder you intend to add the command template to
• Hover over “Add”
• Click “New Item…”
• Search for “Command” (it will have a green Sparkhound logo and read “Visual C# Items”)

• Note: You may need to close and re-open Visual Studio for the template to first appear

• Our naming convention is to end the command name with the word “Command”
• Naming convention example:

• Click “Add”
• The template should have created 3 files in the parent directory
  • SparkitectureDocsTestCommand.cs
  • SparkitectureDocsTestCommandRequest.cs
  • SparkitectureDocsTestCommandResponse.cs

Built With

Angular Cli Cheat Sheet For Beginners

• Angular - The web framework used
• TypeScript - Front-end language used
• C# - Back-end language used
• Node.js - JavaScript runtime
• Bootstrap - Responsive layouts and styling
• Ngx-Formly - Dynamic JSON powered form library for Angular

Contributors

Angular Cli Cheat Sheet Example

• Steve Schaneville - Initial work - Sparkhound
• Seth Valdetero - (placeholder) - Sparkhound
• Vance Fontenot - (placeholder) - Sparkhound
• John Harvey - (placeholder) - Sparkhound
• Claudia Meredith - (placeholder) - Sparkhound
• David Silver - (placeholder) - Sparkhound
• Sam North - (placeholder) - Sparkhound

Angular CLI Cheat Sheet

Angular Cli Cheat Sheet Pdf