Carmen  Grimes

Carmen Grimes

1597709640

Angular 8 - Tutorial | The magic of template reference variables #12

I usually call that feature “the hashtag variable” because it relies on a simple hashtag to create a reference to an element in a template:

source code : https://github.com/Tariqu/angular_8/tree/angular%2312
input #phone placeholder=“phone number”

What the above syntax does is fairly simple: It creates a reference to the input element that can be used later on in my template. Now the scope for this variable is the entire HTML template in which the reference is defined.
Here’s how I could use that reference to get the value of the input, for instance:

!-- phone refers to the input element –
button (click)=“callPhone(phone.value)” Call /button

Note that phone refers to the HTMLElement object instance for the input. As a result, phone has all of the properties and methods of any HTMLElement (id, name, innerHTML, value, etc.)
The above is a nice way to avoid using ngModel or some other kind of data binding in a simple form that does not require much in terms of validation.

Does this also work with components?
The answer is YES! Assuming we have the following HelloWorldComponent:
@Component({
selector: ‘app-hello’,
template: div h2 Hello {{name}} /h2 /div
})
export class HelloComponent {

name = ‘Angular’;
}
We can now get a reference to that component as follows, using the “hashtag syntax”:

app-hello #helloComp /app-hello
And the best part of it is that we’re getting a reference to the actual component instance, HelloWorldComponent, so we can access any methods or properties of that component (even if they are declared as private or protected, which is surprising):
app-hello #helloComp /app-hello !-- The following expression displays “Angular” –
{{helloComp.name}}
We can obviously use that syntax not only to read data from a component, but also to change it.
Does this also work with directives?
Of course, but there is something more to know about it. Most directives are used as attributes, which means we can’t really apply the “hashtag syntax” there, unless we use the same syntax with a twist:
form (ngSubmit)=“onSubmit(myForm)” #myForm=“ngForm”
In the above example, myForm is a reference to the ngForm directive applied to that form.
Now if you’re looking closely at the above HTML element, you’re probably thinking: “Wait a minute, there is no ngForm directive there! I don’t see any attribute called ngForm!” And you would be right to think so.
The answer lies in the ngForm directive source code:
@Directive({
selector: ‘form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]’,

exportAs: ‘ngForm’
})
See the selector for that directive? It applies to any form element that does not have a ngNoForm nor formGroup attribute. Because of that, my form element automatically gets the ngForm directive applied.
The second interesting thing to notice in that code is the exportAs property in the decorator. This tells Angular: “Hey, if someone wants to reference this directive with a template reference variable, the name for it is ngForm”.
Now we know how all of this works. We can create custom directives and expose them with any kind of name using exportAs.

Angular 8 2020 | Introduction to Angular
https://youtu.be/kydPq4r2vbE
Angular 8 2020 | Angular Project Setup #2
https://youtu.be/zsb4vYFf1eI
Angular 8 2020 | Workspace vs File Structure of Angular #3
https://youtu.be/1ukJR6te398
Angular 8 2020 | Single Page Application vs Multi page Application #4
https://youtu.be/jA7Xvw1JNw4
Angular 8 2020 | Complete architecture Overview #5
https://youtu.be/lRTaT74OUic
Angular 8 2020 | What is Component in Angular Application #6
https://youtu.be/5BFeKxGyFdg
Angular 8 2020 | Interpolation #7
https://youtu.be/egNDI8nN8Og
Angular 8 2020 | Property binding #8
https://youtu.be/f9BNLAENCIs
Angular 8 - tutorial | Class Binding #9
https://youtu.be/MKkv9oHDHXQ
Angular 8 - tutorial | Style binding #10
https://youtu.be/_mrtaKmkxAY
Angular 8 - tutorial | event binding #11
https://youtu.be/K1m0HmHwrOI

#angular #angular 8

What is GEEK

Buddha Community

Angular 8 - Tutorial | The magic of template reference variables #12

I am Developer

1617089618

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

Recommended:-Laravel Try Catch

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Carmen  Grimes

Carmen Grimes

1597709640

Angular 8 - Tutorial | The magic of template reference variables #12

I usually call that feature “the hashtag variable” because it relies on a simple hashtag to create a reference to an element in a template:

source code : https://github.com/Tariqu/angular_8/tree/angular%2312
input #phone placeholder=“phone number”

What the above syntax does is fairly simple: It creates a reference to the input element that can be used later on in my template. Now the scope for this variable is the entire HTML template in which the reference is defined.
Here’s how I could use that reference to get the value of the input, for instance:

!-- phone refers to the input element –
button (click)=“callPhone(phone.value)” Call /button

Note that phone refers to the HTMLElement object instance for the input. As a result, phone has all of the properties and methods of any HTMLElement (id, name, innerHTML, value, etc.)
The above is a nice way to avoid using ngModel or some other kind of data binding in a simple form that does not require much in terms of validation.

Does this also work with components?
The answer is YES! Assuming we have the following HelloWorldComponent:
@Component({
selector: ‘app-hello’,
template: div h2 Hello {{name}} /h2 /div
})
export class HelloComponent {

name = ‘Angular’;
}
We can now get a reference to that component as follows, using the “hashtag syntax”:

app-hello #helloComp /app-hello
And the best part of it is that we’re getting a reference to the actual component instance, HelloWorldComponent, so we can access any methods or properties of that component (even if they are declared as private or protected, which is surprising):
app-hello #helloComp /app-hello !-- The following expression displays “Angular” –
{{helloComp.name}}
We can obviously use that syntax not only to read data from a component, but also to change it.
Does this also work with directives?
Of course, but there is something more to know about it. Most directives are used as attributes, which means we can’t really apply the “hashtag syntax” there, unless we use the same syntax with a twist:
form (ngSubmit)=“onSubmit(myForm)” #myForm=“ngForm”
In the above example, myForm is a reference to the ngForm directive applied to that form.
Now if you’re looking closely at the above HTML element, you’re probably thinking: “Wait a minute, there is no ngForm directive there! I don’t see any attribute called ngForm!” And you would be right to think so.
The answer lies in the ngForm directive source code:
@Directive({
selector: ‘form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]’,

exportAs: ‘ngForm’
})
See the selector for that directive? It applies to any form element that does not have a ngNoForm nor formGroup attribute. Because of that, my form element automatically gets the ngForm directive applied.
The second interesting thing to notice in that code is the exportAs property in the decorator. This tells Angular: “Hey, if someone wants to reference this directive with a template reference variable, the name for it is ngForm”.
Now we know how all of this works. We can create custom directives and expose them with any kind of name using exportAs.

Angular 8 2020 | Introduction to Angular
https://youtu.be/kydPq4r2vbE
Angular 8 2020 | Angular Project Setup #2
https://youtu.be/zsb4vYFf1eI
Angular 8 2020 | Workspace vs File Structure of Angular #3
https://youtu.be/1ukJR6te398
Angular 8 2020 | Single Page Application vs Multi page Application #4
https://youtu.be/jA7Xvw1JNw4
Angular 8 2020 | Complete architecture Overview #5
https://youtu.be/lRTaT74OUic
Angular 8 2020 | What is Component in Angular Application #6
https://youtu.be/5BFeKxGyFdg
Angular 8 2020 | Interpolation #7
https://youtu.be/egNDI8nN8Og
Angular 8 2020 | Property binding #8
https://youtu.be/f9BNLAENCIs
Angular 8 - tutorial | Class Binding #9
https://youtu.be/MKkv9oHDHXQ
Angular 8 - tutorial | Style binding #10
https://youtu.be/_mrtaKmkxAY
Angular 8 - tutorial | event binding #11
https://youtu.be/K1m0HmHwrOI

#angular #angular 8

Joseph  Murray

Joseph Murray

1623967440

Reference Variable in Java

Before We Started with the Reference variable we should know about the following facts.

**1. **When we create an object(instance) of class then space is reserved in heap memory. Let’s understand with the help of an example.

Demo D1 = new Demo();

Reference Variable

Now, The space in the heap Memory is created but the question is how to access that space?.

Then, We create a Pointing element or simply called Reference variable which simply points out the Object(the created space in a Heap Memory).

Heap Memory

**Understanding Reference variable **

1. Reference variable is used to point object/values.

**2. **Classes, interfaces, arrays, enumerations, and, annotations are reference types in Java. Reference variables hold the objects/values of reference types in Java.

3. Reference variable can also store null value. By default, if no object is passed to a reference variable then it will store a null value.

**4. **You can access object members using a reference variable using **dot **syntax.

.<instance variable_name / method_name>

#java #reference variable in java #variables in java #reference variables #refer #variable's

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Clara  Gutmann

Clara Gutmann

1598716260

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud