Tested in angular version 7:
- install jquery:
npm install jquery
install jquery typescript intellisense:
npm install @types/jquery
- edit the angular.json file in root folder:
in the architect / build / scripts location, add this:
"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]
- To use jquery inside a component.ts add this import at the top:
Example code to check for functionality:
<button (click)="testJQuery()">Test jquery</button>
Click on the button should fade out and fade in the entire page.
Source: How to include and use jQuery in Angular CLI project
NPM Package for converting from JSON to TypeScript object.
Source: json2typescript – npm
angular2-switcher Easily navigate to typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) in angular2 project.
Source: angular2-switcher – Visual Studio Marketplace
This extension allows quickly scaffold angular 2 file templates in VS Code project.
Source: Angular Files – Visual Studio Marketplace
Binding syntax: An overview
Data binding is a mechanism for coordinating what users see, with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these chores over to a binding framework. You simply declare bindings between binding sources and target HTML elements and let the framework do the work.
Angular provides many kinds of data binding. This guide covers most of them, after a high-level view of Angular data binding and its syntax.
Binding types can be grouped into three categories distinguished by the direction of data flow: from the source-to-view, from view-to-source, and in the two-way sequence: view-to-source-to-view:
Source: Angular – Template Syntax
This is taken from Jon Hilton, Quick Tip Friday newsletter.
You can subscribe to the newsletter here: https://jonhilton.net/
Its a great tip regarding example code for popular web frameworks (also mobile in the works), for example ASP.NET Core on the backend side and Angular or Vuejs on the frontend side etc. See list of backends and frontends here: (scroll down there are many options…)
Building software applications is hard, but doing it in isolation is even harder.
And, unless you’re one of the fortunate few who work in a perfectly balanced team with just the right amount of experienced developers to lean on, you’re often left figuring all this stuff out for yourself.
· Architectural best practices
· How to organise your code
· How to separate your concerns
· Which ORM to use
· How to KISS (keep it simple stupid) and avoid incurring loads of technical debt
But, just because you haven’t got a supportive, experienced and wise team physically on your doorstep doesn’t mean you have to re-invent all the wheels yourself!
Specifically I really want to recommend you check out the “real world” examples over at https://github.com/gothinkster/realworld.
There, they take the exact same application (a Medium clone) and show examples built in all manner of front-end and back-end frameworks.
So if you’re looking to see what a good ASP.NET Core API application looks like (or React, Angular, Vue.js or anything else you can think of)