Read & Learn Techs

 Data Binding - 2 Event Binding Event binding used to build interactive angular applications with the flow of data from component to the element and from element to component . Event binding syntax will have a target event name within parentheses on the left of an equal sign, and a quoted template statement on the right. Eg 1: In this example I used a button to demonstrate the event binding. In here we are binding an onClick() event to the button element. When the user clicks on the button, event binding listens to the button's click event and calls the component's onClick() method in component.ts file. Eg:2  . In here there is  a method named "onUpdateServerName" and add an event with it.

Data Binding - 1 We use data binding for communication in an angular application.We used data binding mainly for the communication between TypeScript and components.There are two ways for data binding. Method 01 - One way data binding We use One way data binding for one way communication .In one way data binding HTML template is changed when we make changes in TypeScript code.That means you can update your view file using model.But you cant change model file using view file. Examples for one way data binding are, Angular Interpolation / String Interpolation Property Binding Event Binding Method 02- Two way data binding In two way data binding if we change the model (TypeScript File) it reflects to view (HTML File) and if we change the view it reflects to the model.This happens immediately and automatically, after we do changes.It ensures that the HTML template and the TypeScript code are updated at all times. String Interpolation  By using String Interpolati

  Angular Directives Directives are used to give instructions to the DOM. Directives specify how to place components and business logic in an Angular application.Directives js class and declared as @directive. There are mainly three directives in Angular.Those are, Component Directives Structural Directives Attribute Directives Component Directives Component directives are used in main class. These components contain the details of how the component should be processed, instantiated and used at run-time. Structural Directives Structural directives should start with a * sign. Structural directives are used to manipulate and change the structure of the DOM elements. Example for structural directives are, *ngIf and *ngFor. Lets see how we can use *ngIf  in our angular application. eg: in this application initially our server created is false and it shows a no server is created. when  we click the"Add server" button "oncreateserver()"  method

Angular Components Angular Component is the key feature of Angular application. We can reduce complexity of whole application by building it by using components. Because Angular components can be reused within the application. There are two ways to create an Angular Component.Those methods are create component manually or creating component directly by using angular command.  Method 01 In this method we create files manually which are included in a component. As a example lets create a new header component. first create a header folder inside the app folder. After that create header.component.html file , header.component.css file and header.component.ts file inside the header folder. Type the content which you want to show in the header in header.html file. import component from angular core in header.component.ts file as below image.and use a selector with app prefix and put location of header.component.html file as template url.

Angular - 2   (Content of App Folder )                                                 Today I am going to talk about the the content of "app" folder in  an Angular application . Src folder contains the main code files related to our angular application. App folder contains the files which we created for app components. app folder is included in "Src" folder and it consists five files which is needed to know to edit the Angular application.Those files are, app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts we have to understand those different files to know, what is going on and which part is responsible for the outlook of the Angular app. app.component.css           app.compponent.css file is empty because we don't use any CSS in this file. app.component.html        This is the most important file of app folder, it controls the front page of node application.We can change the cont

How to create an Angular application To create an Angular application we should download and install node.js in our machine.Because it provide required libraries to run Angular application. After installing node.js in your machine , run following commands step by step to create Angular application. npm install -g @angular/cli   ng new my-dream-app cd my-dream-app       ng serve   After running following commands,open a web browser and type localhost:4200 .Now you have  created a initial Angular application.

Angular Angular is a structural framework for building dynamic web apps. With Angular designers can use HTML as the template language and it allows for the extension of HTML's syntax to convey the application's components effortlessly. Angular has components and those components are highly reusable in the Angular application. Angular is a cross platform language. It supports multiple platforms. You can build different types of apps by using Angular.Those application are Desktop applications, Native applications, Progressive web applications. Angular provides Testing, animation and Accessibility. It provides full stack development along with Node.js, Express.js, and MongoDB. Special Characteristics of Angular MVC –  This is a design pattern used in all modern day web applications. Data Model Binding – You don’t need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code. Writing less code