2 Way Data Binding Vs 1 Way Data Binding


1 Way data binding Add input using 1 way data binding to the input. This will update only in a single direction. If it gets updated anywhere in the component, it will not update because it’s not using 2 way data binding. In order to use 1 way data binding, we need to access the event using the $event. < p >{{name}}< /p > < input type=“text” class=“form-control” (input)=“onUpdateName($event)” />

Creating Forms In Angular Using Reactive Forms


There are 2 ways to build form in Angular, you can use Reactive Forms or Template Driven Forms. Using Reactive forms, you can control the forms using code. Create a Form with the following Controls and Validators 1) Sales Lead Name (should not be empty) 2) Mail (should not be a empty and a valid email) 3) Lead Status Dropdown, with three values: ‘Hot’, ‘Warm’, ‘Cold’ 4) Submit Button Add your own Validator which doesn’t allow “Test” as a Sales Lead Name In addition, implement that Validator as an async Validator (replace the other one) Upon submitting the form, simply print the value to the console

Creating Forms In Angular Using Template Driven Forms


There are 2 ways to build form in Angular, you can use Reactive Forms or Template Driven Forms. Using Template driven forms, you can write templates in the Angular template syntax with the form-specific directives and techniques described in this page. Make sure the email address is not empty and gets validated for email. A dropdown that allows a user to choose different statuses - warm, hot, cold. Status {{status}} statuses = [‘Hot’, ‘Warm’, ‘Cold’]; 3.

Dispose Vs Finalize Dot.Net


The difference between the Dispose and Finalize method in .NET are very suttle. Both methods deal with garbage collection (GC). The .NET Framework provides two methods Finalize and Dispose for releasing unmanaged resources such as: 1. Files 2. Database connections Difference between Dispose & Finalize Method Dispose Finalize It is used to free unmanaged resources like files, database connections etc. at any time.

Finding Smallest Integer In Array


Here is an example showing how to find the lowest number in an array of integers.

How to setup Angular2 and ASP.NET Core from the command line


Setting up Asp.Net Core and Angular2 is actually very easy! There are several ways to setup a project. Before we can start using the command line, we need to install the following: ASP.NET Core installers npm – $ npm install npm@latest -g Yeoman – $ npm install -g yo Step 1: From the command line install the JavaScript Services generator: npm install -g yo generator-aspnetcore-spa Step 2: Run the generator using the yo aspnetcore-spa command and choose Angular 2 from the list of templates.

How to setup Routing in Angular


When adding routes in angular, we can separate the routing code into its own file. We can add a new module call app-routing.module.ts. Use the angular cli to add a new module. Type “ng g m app-routing” This will generate a new module. Add the following code: in the above code, we can add children to each path. Each child can do separate things such as edit and new functions.

Passing Data Between Components in Angular


Passing data between different components is very similar to VueJS. Both use a publisher/subscriber pattern. Below we will demonstate how to accomplish this: 1. Create three new components: GameControl, Odd and Even 2. The GameControl Component should have buttons to start and stop the game 3. When starting the game, an event (holding a incrementing number) should get emitted each second (ref = setInterval()) gameNumber = 0; interval; constructor() {}

Setting Up http services in angular


Structural Directives Vs Attribute Directives In Angular


What are directives in Angular? Directives are instructions in the DOM. Components are directives; however, they have a template. We typically add directives with attribute style. @Directive({ selector: ‘[warningalert]’ }) export class WarningAlertDirective { } Structural Directive *ngIf is a structural directive because it changes the structure of the dom. Attribute Directives ngStyle allows us to dynamically update styles. [ngStyle]=“{backgroundColor:getColor()}” property binding = [] Add A button which says 'Display' Add a paragraph about Wakanda Toggle the displaying of that paragraph with the button created in the first step Log all button clicks in an array and output that array below the paragraph aboveStarting at the 2nd log item, give all future log items a blue background (via ngStyle) and white color (ngClass) Below is the component code: