This is a fresh easy tutorial about Angular 7, for those to never use angular before, so go ahead to get started!
First of all, we need to already have node and npm install in your local environment. For this example we are using: npm
6.4.1 and node:
10.10.0 . Also you need to install globally angular command line, for that we need to do
npm install -g @angular/cli.
So thats all! now we jump to create our first the project running
ng new ng7 .Then we need to decide if you want to add routing, for our example we will need to choose YES to install it, and then we will use SCSS for style sheet so we click select that too.
The following example you can take a look in the following repository: repository:https://github.com/Jero786/angular-7-medium
Jumping to the code
So, we already create our fresh Angular project, then we need to start running them, for that we will execute
ng serve -o , which will open our browser.
Perfect! your project will looks like pretty much like the following:
appfolder, will all your componentes.
index.html that is the root of your application, which will contain the
app-root . There will be insert the entire application.
If you take a look
app.component.ts you will see in the line 4, that the selector it’s pointing the
app-root shown above. That means this is our main component that will insert all our app content in the
app-root main directive.
As you can see, inside
app.component.ts you can show the
@Component which is a object with a set of configuration, and it’s called decorator. There you will able to define, your template file, your style file and also, of course, your selector which is the reference in that case that is declared in the line 12 of our
For more details please take a look the doc reference.
Creating our first components
Okey, move on! Let’s create our first component using the angular command line:
ng generate component nav . That will create a Nav component. (a shorter way to do the same, we could do also:
ng g c nav) And will repeat the same to create
about, contact and home component as well. So your structure folder at this point, should looks like the following:
Perfect! well done, then move one to start to import our component in the main home page of our app. For that, go to the
/src/app/app.component.html and let only the last line, and include
<app-nav></app-nav>. So, after change it, should look like the following picture:
Note: we added a
section tag element to apply then some style on it.
Then go to put some HTML in our
After save, and go to your open tab browser at
localhost:4200 , you should look something like the following:
Pretty simple right? well, we will start to set some template values in our very dead simple example by interpolation. For that go back to our
nav component and then we will change the line 3, adding
And then we will go to our class component
src/app/nav/nav.component.ts and declare
appTitle variable inside the class in the line
10. So in that way we should look our class component in the following way:
Well, nice! now our page shows the value that we define on it, which is
Cool title here!
Okey, at this moment, we have very basic pages, but we are not able to navigate between our component. So for that, we need to say to angular which link or sub path belongs to each component that we already created them.
To do that, we need to define our routes in the following file:
src/app/app-routing.modules.ts . There we will define all our routing configuration. In that file we will import and define all our router pages, in the following way:
As you see, we define in the array of
routes each path and each component related to that path. Perfect!! For more detail about routing, please take a look the following link.
Handler basic events
Now we can bind some basic events to our component, in order to get some user interaction on our example. We can go to the home page view component,
/src/app/nav/home.component.html and we add a button.
And then associate the
firstClick method, in out html component.
And that it’s all! for more information please take a look the following link.
Attribute Binding & Class binding
Now, what start to add some class style in our component which will depend on the user interaction. So basically we want to change the class of our component, based on some flag boolean return TRUE or FALSE. Let take a look our code in our view
Then we change the view.
And then finally we add the class
Then, when you click in your
h1 title, the color will toggle between black and gray. Perfect! :D
Handler multi class style by attribute
In case that we want to change more than one class, we will need a custom angular attribute called
ngClass . Let change our example in order to start using it.
And that it’s all! you handler more than one class, based on a new flag called
Changing the inline style
What if we just want to change a inline style attribute, which will depends on the same var that we already use on the title called
Now our label will change the color as well when change the flag value.And if we want to change multiply styles, we will do the same as class.
So, what happen if we want to follow DRY, and just create a unique
fistClick method, and then call it from several components?, well Angular Services, allow us to have a code, that should be accessible for multiple components in a central location. Perfect, go ahead to create our first services.
Then we will se that we have two news files called
src/app/data.services.ts and their test.
As we see, now it’s declared in our service the method
The last thing that remain it’s import that method in the components that we want. For instance hour home component.
Basics HTTP request
Well, now we want to add support to perform simple HTTP request into our app. For that, we need to import the
@angular/common/http module, that allow us to do it.
src/app/app.modules.ts and then, import the module. In the line
12 then we need to include in the array of imports fo the line
Then, only remain just use it from our services layer.
You will se how to import in line
2 and then add a method namd
getUsers in line
11. Then we move on to import into our home component the list of users.
We Inject by constructor in line
13 the Data service. And then will be available in line
16 to be used as
Then finally we will use out fetch data, our UI component.
1 we ask if we have
users In case that already exist, we move on to iterate and render each user name in line
2 . And that’s all! we will rendering the 2 items (
"brisa", "emi")that fetch and print in our home page with some gray background color.
Working with forms
You have two kind of form in Angular, Template Form and Reactive Form.
First of all, we need to import into our modules in the
src/app/app.module.ts . And you will see how in the line
11 and line
25 it’s included:
Go to the component in the file
src/app/contact/contact.component.tsthat will use our ReactiveForm.
As we see in the image above, in line
2 we import the forms dependency needed. Then we inject by dependency the FormBuilder in line
16 . And Then we define
onSubmit() . Which will take care the submit form operation.
Okey, in the image above in the line 2 we are using event binding to link our
onSubmit method with the submit of the form. In case that was submitted success, we will show the line
4. Also as you can see in the line 10, we will use
messageForm.controls to validate each field of our form.
And finally we will show in the line
31 the message with the information that we get of
messageForm.controls and will interpolate in the page.
If you want to clone this example, here is the link to the Github repository.
And that it’s all for now! thank you for read this small tutorial! please following me on Twitter “@jero786" And I will see the next time!