Modal in Angular 2

This week was very hard for me, because I was a little sick, so I had no strength to work after work. But I tried to move forward with my app.

Under the assumption, the first step was to create a landing page, but later I decided to make a modal that will be used in the login/register. I said I would start with something that does not require creativity and design creation. So, I changed my plan and I built the first modal in angular 2.

So I started with installing the package:

    npm install angular2-modal --save

Later I had to configure the component and add:

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';

Class VievContainerRef represents a container where one or more Views can be attached.

In template I added:

<button (click)="onClick()">...</button>

and defined constructor:

export class AppComponent {
  constructor(overlay: Overlay, vcRef: ViewContainerRef, public modal: Modal) {
    overlay.defaultViewContainer = vcRef;
  }

I also defined onclick()

  onClick() {
    this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('Login')
        .body(`
            Zaloguj`)
        .open();
  }

I must also add something in app.module.ts

import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
@NgModule({
  imports: [ 
    ModalModule.forRoot(),
    BootstrapModalModule
  ]

And that’s it. Now I must add styles and make this app element look good.

Advertisements

My beginings

Today I want to say something about my start in IT. So, I didn’t finish any IT studies. My profession is environmental engineering, so I can plan sanitary installations, ventilations, etc. But after my studies, and first job in my profession, I understood that it isn’t my dream job and I have to change something. It isn’t an easy decision, but I’m happy I did it.

So, I started doing different courses, alone at home. It isn’t easy, because I had to work full time, and evenings and nights I spent on programming. At first I was a bit lost, I did not know how to start. I started with courses “Codecademy” – probably like most beginners. I liked the courses from the frontend (HTML, CSS, js) so I decided I would go that route. So I spent every free moment in programming making sure it was a good decision. Among the various courses, it is worth to note “freecodecamp” – the tasks on this page comprehensively check knowledge, require greater independence and mental effort. Courses are not all. I guess I learned the most by creating my own website. Then I encountered real problems. I also had more independence, And it was a great feeling – Do something from start to finish alone. Of course, it was not always easy. There were times of crisis, discouragement. Most importantly do not give up. You need a lot of patience, time, dedication, but it worth it. It is also good to talk with other people, exchange experiences. I went to various meetings where I talked to other beginners but also experienced people. It was very motivating. After about one year of study, I was able to find my first job. I was very lucky because my big dream came true – remote work. I liked programming, for example, because of the possibilities it gives me. You can work and live in different parts of the world. You are not dependent on one place, you have no normal working hours, everything is flexible. I find myself very well in this and I love these possibilities. Of course, programming is a continuous learning and it is not easy at all. But satisfaction from work is rewarding everything.

To summarize, from my perspective, if you want to get started in IT, the most important is perseverance, patience, self-belief, not surrender, stubborn pursuit of purpose.

Initial post, first contact with Angular 2

Today is the day of the initial commit of my project.

I started from training about Angular 2. Like I said earlier, I never had experienced before with Angular 2 so I must get to know how to do this. My first feeling is: how intutive it is! I hope that the work of this framework it will be a pleasure 🙂

I analyzed also, how looks the structure of the project. I generate my project by tools ‘angular-cli’, but it’s not enough. I want to understand how it all works, how to communicate with each other, which are based on. This is super important at this stage.

So, after that, I decide create my first component – to understand how it works

I generated a component by command

ng generate component registration-bar

It can be more easier, like:

ng g c registation-bar

And thanks this I obtained new folder “registration-bar” in path src/app/registration-bar.

Inside this folder I have now files like:

registration-bar-components.css

registration-bar-components.html

registration-bar-components.spec.ts

registration-bar-components.ts

Additionaly, changed my file: app.module.ts, and automatically added

import { RegistrationBarComponent } from './registration-bar/registration-bar.component';

and

@NgModule({

 declarations: [

 RegistrationBarComponent

 ],

to use my component, just let me add in app.component.html:

<app-registration-bar></app-registration-bar>

and it’s come from registration-bar.components.ts (selector)

@Component({

 selector: 'app-registration-bar',

 templateUrl: './registration-bar.component.html',

 styleUrls: ['./registration-bar.component.css']

})

So now, when I refresh site, I can see the content of my new component on the main page.

I also installed preprocessor sass. I do this like that:

ng set defaults.styleExt scss

And I decided that in this project I will use bootstrap, so I also install it. It’s kind of weird, but I have small experience with this framework. Frequently I use Foundation, but I think that “DSP” it’s a good occasion to improve skills in bootstrap. So I added link to index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

then I used:

npm install bootstrap@next

and configured angular-cli.json

I added

“../node_modules/jquery/dist/jquery.js”,

“../node_modules/tether/dist/js/tether.js”,

“../node_modules/bootstrap/dist/js/bootstrap.js”

to scripts

and

“../node_modules/bootstrap/dist/css/bootstrap.css”,

to styles

Creating a work environment

It’s time to prepare environment work. First, I formed a virtual environment to separate all the packages from other projects, so:

mkvirtualenv worthit

Earlier, of course, I had to install virtualenv.

After this command, I’m  immediately in our virtual environment

If I want to deactivate virtualenv I must just use ‘deactivate’ .

If I want to start again our virtual machine I must use ‘workon worthit’

Now, I install angular 2 with one command:

npm install -g angular-cli

then, I create folder for my projects and inside this folder I use

ng new worthit-project

inside folder

ng serve

and now I’m ready for work

About application

Today I would like to say something about my application.

It calls “Worth IT”. This tool allows you to save and store things, events, etc., that are worthy of attention.
How many times in your life you tasted something, e.g tea, or something good to eat and you thought: “I like it, I want to buy this another time”, but you have not saved this anywhere, and you have forgotten about it. After 2 weeks you want to eat or drink the same thing, but you do not remember the name.

Thanks to the “worth it” this problem will disappear.

So in this application, you will be able to log in to your account, to save your product worthy of attention, evaluate it according to the scale, give a comment, add a category to be able to easily view stored things in the future, add a shop / place where you bought something, maybe see this on the map. It will be the perfect tool to quickly save things that we liked, or on the contrary – to save those things we do not want to try anymore. Thanks this apps we can also recommend someone something good.

This application will be user-friendly, but at the same time, I want to take care of the design.

I realize this application with another programmer who takes part in this project.
He is working on a backend, so this application will be fully functional.

First post in the project

So, it’s time to say hello. My name is Magda and I am front-end developer.

I decided to take part in “DSP 2017” for many reasons.
First of all – it’s an excellent opportunity to learn new technology. I will write my application in Angular 2 and this is a novelty for me. Previously, I worked only with Angular 1, and did not write the application from scratch, only improved existing functionality. This is a big change for me, and I’m very excited about this.

Besides, I like that this project requires a systematic and consequences. To be honest, generally,  I have no problem with regularity and self-denial. I work remotely, so I have to be disciplined and I’m good at it. But in this case I will have more things to do: work full-time, application development and blog writing. I think that it can help me be even more organized and work more efficiently.

Third important thing is the need to describe the progress of my work, problems, successes etc. It will allow me to better understand the various stages of application development. I’ve never described the problems with the code, so it can be great experience.

So, it seems that it will be interesting 3 months. Now it’s the time to writing a work plan, main assumptions, and the first lines of code.