- There are 5 big differences that TypeScript brings in over ES5:

• types
• classes
• decorators
• imports
• language utilities (eg. Destructuring)

- Consider the following example: - In the above example we are defining a new function called greetText which takes one argument called name. The syntax name: string represents that the function expects name to be a string. Our code will not compile if we call this function with anything other than a string.
- greetText also has a syntax after the parentheses : string { //code }. The colon specifies that we will specify a return type for this function - which in this case is a string. You you try returning a number instead, it will throw an error.

- Some examples of built in types are as follows:

- In JavaScript ES5 object oriented programming was accomplished by using prototype-based objects. This model doesn't use classes, but instead relies on prototypes. In ES6 we finally have built-in classes in JavaScript.
- To define a class, we do this: - A class can have properties, methods, and constructors.
- To instantiate a class, we use the new keyword. Use new Person() to create a new instance of the Person class, for example.

Properties

:
- Properties define data attached to an instance of a class. For example, a class named Person might have properties like first_name, last_name and age.
- Each property in a class can optionally have a type. For example, we could say that the first_name and last_name properties are strings and the age property is a number.
- The declaration for a Person class that looks like this:

Expand Gist

Methods

:
- Methods are functions that run in context of an object. To call a method on an object, we first have to have an instance of that object.
- When methods don't declare an explicit returning type and return a value, it's assumed they can return anything (any type). Note that a void value is also a valid any value.
- Consider the Person class declared above again:

Expand Gist

Constructors

:
- Constructor methods must be named constructor. They can optionally take parameters but they can't return any values, since they are called when the class is being instantiated (i.e. an instance of the class is being created, no other value can be returned).
- When a class has no constructor defined explicitly one will be created automatically.
- In TypeScript you can have only one constructor per class. That is a departure from ES6 which allows one class to have more than one constructor as long as they have a different number of parameters.
- So how do you manage trying to have multiple constructors in typescript? You use optional parameters. As shown on this SO answer here.
- Adding a constructor to our Person class, we get:

Expand Gist

Inheritance

:
- Read more at MDN about what inheritance is all about.
- Inheritance is a way to indicate that a class receives behavior from a parent class. Then we can override, modify or augment those behaviors on the new class.
- Inheritance is achieved through the extends keyword.
- Consider the following example:

Expand Gist

- Fat arrow => functions are a shorthand notation for writing functions.
- Consider the run() function we wrote above and let us see how we can re-write it as an arrow function
- They also make writing higher-order functions easier.

- You can add variables directly in your Strings by using template strings.
- You can also wrote multi-line strings by using these without having to use the concatenation (+) operator

- SO Source
- Something, something.. good luck

- A framework is usually just the code library used to build an application, whereas a platform is more holistic and includes tooling and support beyond a framework. AngularJS was focused solely on building web applications in the browser and was clearly a framework. Angular, on the other hand, provides many other features such as:

Dedicated CLI for application development, testing, and deployment: You can install the CLI using npm: npm install -g @angular/cli To see the full list of features, you can run ng help to output the current help documentation.

Offline rendering capabilities on many back-end server platforms: Compiling output in Angular is decoupled from the browser in a way that allows Angular applications to be rendered in different environments, such as a server or desktop app. The compiler in Angular is responsible for resolving data bindings, registering event handlers, and rendering out the resulting HTML for components. The term server rendering is about the notion that it shouldn't matter where you run the JavaScript engine that executes Angular code. It should be possible to run Angular universally, such as with browser JavaScript engines, NodeJS, or even less common engines like Java's Nashorn engine. This greatly increases the ways in which Angular can be used. Server rendering allows for faster loading on mobile devices and improves the performance/reponsiveness of the app in the browser.

Desktop-, mobile-, and browser-based application execution environments: Angular's rendering design makes it possible to support rendering out to different native platforms. This means you can share a lot of code between your Angular applications, even if some are designed to build mobile apps and others are web applications.

Comprehensive UI component libraries, such as Material Design: Rather than having to build your own charts or tabs components, you can use one of the many prebuilt options.

..hence classifying it as a platform rather than just a framework.

- Component is a way to create custom HTML elements in your application.
- When we build components, the following are the tenets we should consider when designing the best components possible.

Encapsulation - Keeping component logic in a single place

Isolation - Keeping component internals hidden from external actors

Reusability - Allowing component reuse with minimal effort

Evented - Emitting events during the lifecycle of the component

Customizable - Making it possible to style and extend the component

Declarative - Using a component with simple declarative markup

- The following 4 ideas are central to the definition of Components:

Custom elements (encapsulation, declarative, reusability, evented): Custom elements means being able to extend HTML with our own additional elements. You can read more here. Custom elements have a lot of the stuff necessary for building components. It gives us a declarative way to create a reusable component, which encapsulates the internal mechanics of the component away from the rest of the application, but can emit events to enable other components to hook into the lifecycle. Angular uses these concepts in its implementation of components. Every Angular component is a custom element and fulfills the four tenets (and more) that we expect to get from a custom element.

Shadow DOM: The Shadow DOM is an isolated Document Object Model (DOM) tree that's detached from the typical CSS inheritance, allowing you to create a barrier between markup inside and outside of the Shadow DOM. For example, if you have a button inside of a Shadow DOM and a button outside, any CSS for the button written outside the Shadow DOM won't affect the button inside it. This is important for Angular because it allows us to have better control over how CSS affects the way the components display.

Templates: Templates allow us to create isolated fragments of the DOM to use in our components. Read more about it here. Templates are often used with the Shadow DOM because it allows you to define the template and then inject it into the shadow root. Without templates, the Shadow DOM APIs would require us to inject content node by node. They're also used by Angular as part of the lifecycle of components and the compilation process, allowing Angular to keep isolated, inert copies of the template as data changes and needs to be recompiled.

JavaScript modules: Modules are an isolated piece of JavaScript that can be used to generate a component, create a reusable service, or do anything else JavaScript can do. They're fundamentally a way to encapsulate application code and choose what's available for the other parts of the application to use. In JavaScript, a module is any file of JavaScript code that contains the export keyword. Modules export values that they want to expose to the application and can keep other parts of the internal logic private. Then, in order to use an exported value, you have to first import it from another module. Executing an Angular application is fundamentally loading a module that contains the application bootstrapping logic, which in turn starts to load and trigger additional modules.

- In the terminal, start from a directory that you want to generate a new project folder inside. Then you can run the following command to generate a new project, and then start the development server:
ng new stocks
cd stocks
ng serve
- Once done, you can point your browser to http://localhost:4200 to see the landing page.

Asset	Role
e2e	End-to-end testing folder, contains a basic stub test
node_modules	Standard NPM modules directory, no code should be placed here
src	Source directory for the application. All your application code goes here.
.editorconfig	Editor configuration defaults
.angular-cli.json	Configuration file for the angular-cli. angular-cli.json file has been renamed/replaced with angular.json in version 6 of Angular. SO Link
karma.conf.js	Karma configuration file for unit test runner. Unit tests are run using karma.
package.json	Standard NPM package manifest file. Difference between "^1.4.0" and "~2.0.1" version numbers.
package-lock.json	It stores an exact, versioned dependency tree rather than using starred versioning like package.json itself (e.g. 1.0.*). This means you can guarantee the dependencies for other developers or prod releases, etc.
protractor.conf.js	Protractor configuration file for e2e test runner. This is now under the e2e folder. End-to-end testing is done using protractor.
README.md	Standard readme file, contains starter information
tsconfig.app.json	TypeScript compiler configuration for apps
tsconfig.json	Default configuration file for TypeScript compiler
tsconfig.spec.json	TypeScript compiler configuration for unit tests
tslint.json	TSLint configuration file for TypeScript linting rules

Asset	Role
app	Contains the primary App component and module
assets	Empty directory to store static assets like images
environments	Environment configurations to allow you to build for different targets, like dev or production
favicon.ico	Image displayed as browser favorite icon
index.html	Root HTML file for the application
main.ts	Entry point for the web application code
polyfills.ts	Imports some common polyfills required to run Angular properly on some browsers. What are polyfills
styles.css	Global stylesheet
test.ts	Unit test entry point, not part of application

- Angular requires at least one component and one module. A component is the basic building block of Angular applications and acts much like any other HTML element. A module is a way for Angular to organize different parts of the application into a single unit that Angular can understand. Components are for functionality and structure, whereas modules are for packaging and distribution. You might think of components as LEGO bricks, which can be many different shapes, sizes, and colors, and modules would be the packaging the LEGOs come in.

- SO Link for when to use Services. Services come in handy in the following scenarios:
a) When you want to share information between two or more controllers:
- One may use $rootScope to also communicate between controllers, but it should be avoided as much as possible since it is a global scope.
b) When a functionality is to be used multiple times.
- SO link for how to create a Singleton Service.
- Services are objects that abstract some common logic that you plan to reuse in multiple places. Think of services is as sharable objects that any part of your app can import as needed. They can do about anything you need them to do, because they're objects. Using ES2015 modules, these classes are exported, and so any component can import them as necessary. They could also have functions or even static values, like a string or number, as a way to share data between various parts of your application.
- In the app, you'll want to have a list of the stocks for both the dashboard and manage pages to use. This is a perfect scenario of when to use a service to help manage the data and share it across different components.
- To generate a Service you run the following: ng generate service services/stocks. The CLI will generate the files in the src/app/services directory.
- Add the following code to the auto-generated class. - The StockInterface interface is defined and exported for other components to use. This provides a TypeScript definition of what a stock object should contain, which is used by TypeScript to ensure the use of the data remains consistent.
- The StocksService class is exported and is decorated by the Injectable decorator. The @Injectable() decorator marks it as a service that can be injected. The decorator is used to set up the proper wiring for Angular to know how to use it elsewhere, so if you forget to include the decorator, the class might not be injectable into your application.
- In the constructor method, the HttpClient service is injected using the TypeScript technique of declaring a private variable called http and then giving it a type of HttpClient.
- The load() method makes a call to the HttpClient service to load the data for current stock price values. The HttpClient service is called and returns an observable, which is a construct for handling asynchronous events, such as data from an API call.
- The this.http.get<Array<StockInterface>> is the type variable. This is a feature of TypeScript that tells it what kind of object it should expect. In this case it will expect to get an array of objects that conform to the StockInterface.
- There is one last thing that we have to do - in the src/app/app.module.ts file Side note about how Dependency Injection works in Angular:
- There are a few key pieces to the DI system.
- The first is the injector. This is the service that Angular provides for requesting and registering dependencies. You'll invoke the injector by declaring a type annotation on the property. This is what we are doing on line 22 of stocks.service.ts file above: constructor(private http: HttpClient){ }. Because we declare the type as HttpClient (which is a known service in Angular), the application will use the injector to ensure that the http property contains an instance of the HttpClient service.
- The second part of DI is providers. Providers are responsible for creating the instance of the object requested. The injector knows the list of available providers, and based on the name (which above is HttpClient), it calls a factory function from the provider and returns the requested object.
- Anything that has been registered with an NgModule's providers array is available to be injected in your application code (hence we add StocksService above in app.module_v2.ts to the providers array).
- Now we know how to:
a) Create a service, make it injectable by using the @Injectable decorator
b) Import an external Module that your app depends on into your app
c) Register the service you created with the app so that other components can use it
Examples of both of these are present in the gist app.module_v2.ts

- Generate a new component by running the following: ng generate component components/summary
- The CLI will generate a new component inside the src/app/components/summary directory.
- The generated component contains an empty CSS file, basic HTML template, test stub, and empty class already initialized with the component annotation. - Line 1,2 [ngClass]="{increase:isPositive(), decrease: isNegative()} is a special kind of attribute known as a Directive. Directives allow you to modify the behavior and display of DOM elements in a template. NgClass directive, for example, allows you to change the list of classes that are attached.
- The NgClass directive is able to add or remove CSS classes to and from the element. It's assigned a value, which is an object that contains properties that are the CSS class names (if you go into summary.component.css you will see that there are CSS classes with names "increase" and "decrease"), and those properties map to a method on the controller (to be written). If the method returns true, it will add the class; if false, it will be removed. In this snippet, the card will get the increase CSS class when it's positive, or the decrease CSS class when it's negative.

- Let's move to {{stock?.symbol?.toUpperCase()}}. The double curly braces syntax is the way to display some value in the page (interpolation). The content between the braces is called an Angular expression and is evaluated against the controller (like the directive), meaning that it will try to find a property on the controller to display. If it fails, normally it will throw an error, but the safe navigation operator ?. will silently fail and not display anything if the property is missing.

- {{stock?.lastTradePriceOnly | currency:'USD':'symbol':'.2'}} shows another feature of Angular called pipes, which are added directly into the expression to format the output. The interpolation expression is extended with a pipe symbol, | , and then a pipe is named and optionally configured with values separated with the colon : symbol. Pipes only modify the data before it is displayed, and do not change the value in the controller. The double curly braces indicate that you want to bind the data stored in the stock.lastTradePriceOnly property to display it. The data is piped through the Currency pipe, which converts the value into a financial figure based on a USD figure, and rounds to two decimal points.

- {{stock?.change | currency:'USD':'symbol':'.2'}} ({{stock?.changeInPercent | percent:'.2'}}) has two different interpolation bindings with a currency or a Percentage pipe. The first will convert to the same currency format, but the second will take a percentage as a decimal, such as 0.06, and turn it into 6%. Note that the round brackets in the second interpolation are not the part of any syntax, they are just there because the UI needs that value to be in round brackets.

- The summary.component.html template needs a controller to wire up the data and the methods. Make the following changes to the src/app/components/summary/summary.component.ts file.
- SO Link explaining why we need to use ngOnInit if we already have a constructor?
- The summary controller class starts with a property called stock, which is preceded with the Input annotation. This indicates that this property is to be provided to the component by a parent component passing it to the summary. Properties are bound to an element using an attribute, as you can see here - this (hypothetical) example will set the value of stockData of the parent component in the stock property of the Summary component:
<summary [stock]="stockData"></summary>
Because input is passed through a binding attribute, it will evaluate the expression and pass it into the stock @Input property for the Summary component to consume.
- Basically, this is all you need to remember: Angular expressions behave the same anytime there's a binding. They try to find a corresponding value in the controller to bind to the property.
- This SO Link goes into why we need the @Input decorator.

- We also want to apply certain styling to the summary. Open the src/app/components/summary/summary.component.css file.
- The :host selector is used because we want components to be as self-contained as possible. This relies on the Shadow DOM concepts discussed earlier. When Angular renders this component, it will modify the output to ensure that the CSS selector is unique and doesn't accidentally interfere with other elements on the page.
- The host selector is a way to specify that you want the styles to apply to the element that hosts the element, so in this case it will look at the Summary component element itself rather than the contents inside it.
- Look at the src/app/app.module.ts file and you'll see that the CLI already modified the module to include the Summary component in the App module.
- Now update the contents of the src/app/app.component.ts file.
- We store the loaded stock data onto a property called stocks. We also provide some typing information, which is imported from our Stocks service, so that TypeScript knows what kind of value to expect. Finally, instead of logging the data to the console, we store it on the stocks property.
- Now we need to change the src/app/app.component.html file to use the Summary Component.
- The first line added *ngIf="stocks", which is a directive that will only render the contents inside the element when the expression is true. In this case, it won't render the Summary component until the stock data has been loaded.
- The middle line shows the instantiation of a single Summary component, and the first value of the stocks array is bound into the stock property. The data returns as an array, so we're directly accessing the first value. Recall the input value we declared in the Summary component, which is also named stock.
- If everything was set up correctly, you should now see your first Component that displays a Summary card for the current stock value of AAPL!!!!

- Generate another Component: ng generate component components/dashboard. This will output new files into the src/app/components/dashboard directory for the HTML, CSS, controller, and unit test. It also adds the component to the App module (app.module.ts) to be immediately consumable.
- Make the following changes to src/app/components/dashboard/dashboard.component.ts - The DashboardComponent class is the component controller, and it declares that it must implement the requirements of OnInit. If it doesn't, TypeScript will fail to compile the code and throw an error. It then has two properties: an array of stocks and an array of strings that represent the stock symbols to display. Initially they're empty arrays, so we'll need to get them loaded for the component to render.
- The constructor method runs as soon as the component is created. It will import the Stocks service onto the service property and then request the current list of stock symbols from it. This works because this is a synchronous action that loads a value directly from memory.
- But we don't load data from the service in the constructor for a number of reasons. The constructor fires early in the rendering of a component, which means that often, values are not yet ready to be consumed. Components expose a number of lifecycle hooks that allow you to execute commands at various stages of rendering, giving you greater control over when things occur.
- In our code, we use the ngOnInit lifecycle hook to call the service to load the stock data. It uses the list of stock symbols that was loaded in the constructor. We then subscribe to wait for the results to return and store them in the stocks property. This uses the observable approach to handling asynchronous requests. We are using observables because the HttpClient returns an observable for us to receive the response. This is exposed as a stream of data, even though it is a single event.

- The last step is to change the src/app/components/dashboard/dashboard.component.html file.
- We see another element that has a new directive, NgFor. Like NgIf, it starts with an *
- NgFor will then create an instance of the Summary component for each of the stock items. It binds the stock data into the component. Each copy of the Summary component is distinct from the others, and they don't directly share data.

- So now we know how to:
a) Add a service to a component - inject it into the constructor of the controller class of the component
b) Nest components within other components - in the html file of the parent component, use the selector of the child component
c) Pass data from a parent component to a child component - use attribute binding of type [nameOfDataFieldUsedInChildComponent]="nameOfDataFieldUsedInParentComponent". Remember to annotate the nameOfDataFieldUsedInChildComponent in the child component with @Input

- Forms are essential in applications, and Angular comes with built-in support for building complex forms with many features. Forms in Angular are comprised of any number of controls, which are the various types of inputs and fields the form may contain (such as a text input, a checkbox, or some custom lement).
- First, create a new component using ng generate component components/manage. Now update the src/app/app.component.html so that it is the app-manage component that is beign served.
- We also need to add the FormsModule to our application, because we are going to use the form features that aren't automatically included by Angular. Open up the src/app/app.module.ts file and add a new import: import { FormsModule } from '@angular/forms';
- Open src/app/components/manage/manage.component.ts and add the following:
- The constructor uses the service to get the array of stock symbols and store it on the symbols property. This doesn't require the OnInit lifecycle hook, because it's a synchronous request to get data that exists in memory. - The (submit)="add()" attribute is a way to add an event listener, known as an event binding. When the form is submitted (which is done by pressing Enter), it will call the add method. Any attribute that's surrounded by parentheses is an event binding, and the name of the event should match the event without the on (onsubmit is submit).
- The [(ngModel)]="stock" attribute is a two-way binding that will sync the value of the input and the value of the property in the controller anytime it changes from either location. This way, as the user types into the text field, the value will be immediately available for the controller to consume. When the user hits Enter, the submit event fires and will use the value of the stock property when adding the new symbol.
- The next section loops over the list of symbols using NgFor. For each symbol, it will create a local variable called symbol, create a new table row that binds the value, and a button that's for removing the item.
- The remove button contains another event binding, this one to handle the click event. The (click)="remove(symbol)" attribute adds an event listener to the click event and will call the remove method in the controller, passing along the symbol. Because there are multiple instances of the button, each one passes along the local variable to know which symbol to remove.

- Routing configures the different pages that the application can render. Angular has a router that works well with the Angular architecture by mapping components to routes.
- Create a new file at src/app/app.routes.ts
- The router works by declaring an outlet in the template, which is the place in the template that the final rendered component will be displayed. Think of the outlet as the default placeholder for the content, and until the content is ready to be displayed, it will be empty.
- The RouterModule is used to activate the router and accepts the routes configuration when it's initialized. We also import the two routable components, the Dashboard and Manage components, so we can reference them properly in our routes configuration.
- The routes are defined as an array of objects that have at least one property - in this case two, for a URL path and a component. For the first route, there's no path, so it acts as the application index (which will be http://localhost:4200) and links to the Dashboard component. The second route provides a URL path of manage (which will be http://localhost:4200/manage) and links to the Manage component.
- Finally, we create a new value AppRoutes, which is assigned to the result of RouterModule.forRoot(routes). It's a way to pass configuration to the module. In this case, we're passing the array of routes. We export this so we can import it into our App module and register it.
- In src/app/app.module.ts: - So now we know how to:
a) Add routing to our app so that when a particular link is clicked, the corresponding intended component is rendered.

- In the src/app/app.component.html file, make the following changes: - This declares the specific location in the application that the router should render the component. It's the same place that we've put our components while building them, so it should make sense that this is the best place.
- Then we need to update the links to use a new directive that will set up the navigation between routes. The RouterLink directive binds to an array of paths that are used to build a URL. The directive parses the array and tries to match to a known route. Once it matches a route, it will add an href to the anchor tag that correctly links to that route.

- Angular Property Binding
- Difference between [] and {{}} for binding state to property?
- Angular HTML Binding
- Binding select element to object in Angular

- npm install -g @angular/cli@latest
- SO Link

- ng version
- SO Link

- First update your Angular CLI
- Run: ng add @ng-bootstrap/ng-bootstrap
- It will take care of importing the NgbModule into the app.module.ts and adding the bootstrap.min.css to the styles in angular.json file.
- GitHub Link

- ng new MyProjectName
- cd MyProjectName
- ng serve
- ng generate service services/stocks // Will create a new service in the src/app/services folder
- ng generate component components/summary // Will create a new component in the src/app/component/summary folder

- The Node Package Manager (npm for short) is installed as a part of Node.js. To check if npm is available as a part of our development environment, we can open a terminal window and type: npm -v
- Install Typescript: npm install -g typescript
- Install Angular CLI: npm install -g @angular/cli
- All the things that the Angular CLI can do: ng help

- Create a new project from scratch: ng new angular-hello-world
- This will generate a bunch of files. If you go into the src/index.html, you will see the <app-root></app-root> tag. The app-root tag is where our application will be rendered. app-root is a component that is defined by our Angular application. In Angular we can define our own HTML tags and give them custom functionality. The app-root tag will be the “entry point” for our application on the page.
- Launch your application using: ng serve

- The browser already knows how to display tags such as <select>, <form>, <video>. But what if we wanted to teach the browser some new tags, like <login> to display a login bar. This is the basic idea behind components. We are creating components that are basically custom tags and teaching the browser how to display them. In the below example, we will be creating our own custom tag: app-hello-world
- We generate a new component by running ng generate component hello-world. This is what the generated component looks like:

- Any property that is defined in a class, can be accessed by the template of the class. Question is, how do we pass the value of that property to a Child component.
- Consider the below code snippet. The property names is declared as an array of strings. - We want the child component to use the array of strings. First we tell Angular that we want to pass the data to the child component by doing the below. app-user-item is the child component to which we are passing the data. Note that in the assignment operation, name is in quotes. Why are we assigning the value to userName? It's because we have defined a property named userName in the app-user-item class. - We have defined a property named userName in the app-user-item class. And we are annotating the property with an @Input decorator. @Input() allows a parent component to update data in the child component. - Any property that is defined in the typescript file can be used in the template using {{ }}. For example, take note of the userName property below. The userName property was defined in the file above as a property, and hence we are able to use it below in the template file for the class.

- When you hit ng serve, angular will look for the angular.json file to find the entry point to the app. At a high level, the entire process looks like this:
a) angular.json specifies a main file, which in this case is the main.ts file.
b) main.ts is the entry point for the application and bootstraps the entire application
c) The bootstrap process boots an Angular module
d) The app then goes into src/app/app.module.ts where it find the AppModule
e) AppModule specifies which component to use as the top-level component. In this case it is AppComponent (src/app/app.component.ts)
f) AppComponent, in its templateUrl then defines the app.component.html which finally contains our app-user-list component
- Angular has the concept of modules. When you boot an Angular app, you’re not booting a component directly, but instead you create an NgModule which points to the component you want to load. - You can see the class annotated with @NgModule. The @NgModule defines four keys that are used. We will look at the keys one-by-one.

declarations

: specifies the components that are defined in this module. You have to declare components in a NgModule before you can use them in your templates. When we use the ng generate to generate a new component, the CLI automatically adds the component to the list of declarations.

imports

: describes which dependencies this module has. Since we are creating a browser app, we have added the dependency as BrowserModule. Note that there are two similar keywords: import and imports. We put something in our NgModule's imports if we're going to be using it in our templates or with dependency injection.

providers

: providers is used for dependency injection. So to make a service available to be injected throughout our application, we will add it here.

bootstrap

: tells Angular that when this module is used to bootstrap an app, we need to load the AppComponent as the top-level component.

- Ideally, a form should be it's own component, but that will make passing data a bit complicated. So instead we are going with a simpler example.
- This is some version of a form that we will be using: - We tell Angular we want to respond to an event by enclosing the event name in parentheses. For instance, to add a function call to the <button/> onClick event, we do the above. When the button is clicked, it will call the addArticle method. The addArticle method will be defined in the same class in which the templateUrl is set as app.component.html. The addArticle function is defined as follows: - Note that the addArticle method accepts two args. In the html, we need to pass in these values to the addArticle method that is called on the onClick event. We do this by using a template variable. Notice that in the input tags we used the # (hash) to tell Angular to assign those tags to a local variable. By adding the #newtitle and #newlink to the appropriate <input/> elements, we can pass them as variables into the addArticle() function on the button.
- <input name="title" id="title" #newtitle> this markup tells Angular to bind this input HTML element to the variable #newtitle. The #newtitle syntax is called a resolve. newtitle is now an object that represents this input DOM element (specifically, the type is HTMLInputElement). Because newtitle is an object, that means we get the value of the input tag using newtitle.value. Similarly we add #newlink to the other input tag, so that we'll be able to extract the value from it as well. The objects that are returned from the resolve that we used on the input elements are then passed into the function addArticle.
- However, clicking on the 'Submit Link' button will cause the page to reload. JavaScript, by default, propagates the click event to all the parent components. Because the click event is propagated to parents, our browser is trying to follow the empty link, which tells the browser to reload (don't know what this means). To fix that, we need to make the click event handler to return false. This will ensure the browser won’t try to refresh the page.
- Hence we update our function which handles the submit functionality to return false when the form is submitted. This tells the browser not to propogate the event upwards. Whenever you are using the (click) event, you will have to use the return false if you want to prevent the browser reload.
- This completes the form. Now when you click on submit, you will be able to see the message logged to the console.
- We also have something to do with @HostBinding that I do not understand - The below is just to highlight typescript related changes that have been done recently:

- Each Component is composed of three parts:
a) The Component @Decorator
b) A View that can be the templateUrl or template
c) A Controller
- We looked at this earlier, but repeating it anyways.
- The @Component is called the Decorator that adds metadata to the class that follows it, which in this case is AppComponent. The @Component annotation also specifies the selector which tells Angular which element to match. By saying selector: app-root, we're saying that in our HTML we want to match the app-root tag, that is, we’re defining a new tag that has new functionality whenever we use it. E.g. when we put this in our HTML: <app-root>, Angular will use the AppComponent component to implement the functionality.
and specifies template which defines the view to render.
- The Controller is defined by the AppComponent class. - Using the {{ }} syntax is called template binding. It tells the view we want to use the value of the expression inside the brackets at this location in our template. Note that the code inside the brackets is an expression. What it means is that we can do things like this:

- Consider the following code: - The [squareBrackets] pass inputs and the (parentheses) handle outputs. Data flows in to your component via input bindings and events flow out of your component through output bindings.
- [productList]="products" Here we are saying that we want to read the value of the expression 'products' from the AppComponent and store that into the productList variable that is defined in the ProductsList component. productList is being referred to in the text as 'attribute key' and products as 'instance property'.
- (onProductSelected)="productWasSelected($event)" We're saying that we want to listen to the onProductSelected output from the ProductsList component. (onProductSelected), the left-hand side is the name of the output we want to "listen" on. "productWasSelected", the right-hand side is the function we want to call when something new is sent to this output. $event is a special variable here that represents the thing emitted on (i.e. sent to) the output.
- While passing inputs to a child component, we can use different names. i.e. the attribute keys can be different from the instance property names. For example, this is how we can pass in the value from the parent component: - And this is how we can read the values of the input in the Component: -