Using Conditional Rendering and displaying lists in ReactJS

     

When using conditional rendering, it is important to first create a list using an object and then output that object in the render section. We can use the map function to iterate through the array of objects to add data to the variable. Given the code below, we use the map() function to take an array of numbers and add it to an unordered list with their values. We assign the new array returned by map() See the Pen List of Numbers by Dan Abramov (@gaearon) on CodePen.


Create new components in ReactJS

     

The instructions are: Create TWO new components: UserInput and UserOutput UserInput should hold an input element, UserOutput two paragraphs Output multiple UserOutput components in the App component (any paragraph texts of your choice) Pass a username (of your choice) to UserOutput via props and display it there Add state to the App component (=> the username) and pass the username to the UserOutput component state = { persons: [ { name: “Tyrell”, age: 38 }, { name: “Tyrone”, age: 28 }, { name: “Ty”, age: 18 } ], username: “, password: “ }; Add a method to manipulate the state (=> an event-handler method)


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() {}