Ninja Space Content Blog

This is Week Two of Angular Part 2, click here to see Week Two of Angular Part 1.

What else impresses me about Angular so far
I am so excited about their pipes and how easily it is to change the format of your data!

Two-way Binding
Following the Angular Tutorial from Programming with Mosh, I kept getting the following error: "NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'." After some googling, I realized that with my version of Angular installed, I had to go to my app.module.ts file to add:
import { FormsModule } from '@angular/forms'; and include FormsModule under my array of imports.

Using Bootstrap Icons
First, npm i bootstrap-icons. Then add @import "~bootstrap-icons/font/bootstrap-icons.css"; to the style.css file. After that, you can implement the icon of your choice from https://icons.getbootstrap.com.

Creating a New Pipe
You can create a new pipe in the terminal by typing ng g p pipe-name. Go to that ts file and edit the transform section. Then, in the template or html file, you will implement it.

Input Properties
Going through the lesson with Mosh at 15%, I couldn't replicate the same results as he did using the same code. It could be that my Angular/TypeScript version is different than his and so the implementation may be different now. I'll need to revisit this!

Cool Tip
A cool tip that I learned is how to change a variable name and let it change the rest of them by selecting the variable name, click F2 and then change the variable name and click 'enter'.

I'm officially on my Week Two of Learning Angular. Click here to see Week One. I'm finding that as I'm noting all of these while I'm learning, it's helping me immensely and I hope it'll help you. I decided to purchase Mosh's Angular Tutorial for $15. It seems like a great deal for 30 hours of tutorial and I don't have to waste time weeding through materials and watching in between ads from Youtube.

Components
To make a class a component, you have to add the decorator at the top like import {Component} from '@angular/core';

Then, apply it to the class like a function called a decorator function like @Component({
selector: 'names',
template: '<h2>Names</h2>'
})

You can name the selector anything you want here as this is where you define this name. Make sure to add a template. Then, you go to app.modules file and add the new class Component to the top. Then go to the html file and add <names></name> and you'll see the template on the page.

Instead of manually adding a new file name for a component, you can use the command line to create it as that will save you a few steps. For example, if you're creating a new component for dogs, it would be ng g c dogs that you'd type in the command line.

Directives
Directives are really powerful to use in the template: section. You can put in a loop like so:
<li *ngFor="let name of names">
{{name}}
</li>

Property Binding
There are two ways to use display data in the DOM. You can use interpolation like:
<h2>{{ title }}</h2> or Property Binding like:
<h2 [textContent]="title"></h2>

Bootstrap CSS Library with Angular
You can use boostrap library with Angular. First, in the terminal, you type the following:
npm install bootstrap --save. Then, go to styles.css to import it by adding the following to the top:
@import "~bootstrap/dist/css/bootstrap.css"; 

Event Binding
There was a bug that I kept getting. When I added a $event as a parameter, I kept getting this error: "Parameter '$event' implicitly has an 'any' type.ts(7006)" and after some digging around in StackOverflow, I found that it was because I had to specify what my $event type is so I had to add a : any like so: onSave($event:any) {console.log("Button was clicked info", $event)}

Template Variable
You can use hash in your input to create a variable like so:
<input #name (keyup.enter)="onKeyUp(email.value)" />

I decided to start learning Angular and TypeScript this week. I looked at a 2 hour YouTube video by Programming with Mosh to get a good glimpse at it before I started practicing along. After looking at the video in normal speed for 2 hours (I would speed it up if I am going over it again), without getting my hands in code on VSC, I was really intimidated by my first tutorial on Angular. However, it also reminded me of Java, using interfaces, classes and constructors. Besides for looking at a couple Java YouTube tutorial videos last month, I haven't started a project with Java yet because I had a really intense month of trying to go over computer science materials for a series of interviews that I had to prepare for. I really need to get back to Java again when I have a chance but for now, I am going to continue with my learning in Angular.

Many local companies in my area are looking for developers who are knowledgeable in Angular, not React, so I'm going to build a couple of projects in Angular this summer for my portfolio. As I'm studying and learning, I'm going to document some notes week-by-week here on my Ninja Space Content blog.

Do I like Angular or React better after 1 week of Learning?
Even though I've only been learning Angular and TypeScript for a week, I can already see how powerful Angular is as it catches my errors and mistakes right away as I'm typing. It catches errors at compile time and doesn't have to wait until run time.

A data type that I need to get more familiar with is enum and it's a pretty useful tool to use as a data type. An example of how to use enum is the following: 

enum Name { Ninja = 0, Space = 1, Content = 2 };
let blogName = Name.Ninja;


Here's a Helpful List of Commands for a Mac 
I'm going to use this list as a reference and hope you'll find it helpful too.

• If you already have Node, to install Angular on your Mac for the first time, use command: sudo npm install -g @angular/cli
• type: ng --version in your terminal to see that version of your angular that you've just downloaded
• Create a new Angular project by typing: ng new project-name in your terminal. Replace project-name with whatever name you'd like to name your file.
• ng serve in terminal to open Development Server. Default is localhost:4200.
• To install TypeScript onto your Mac computer, use command: sudo npm install -g typescript and to check your version, type: tsc --version
• To compile, type: tsc main.ts or whatever your file name is and this will compile to ES5 main.js (js file) of your original file
• Type: ng serve to transpile the code.
• To run code, type: node main.js or whatever your file name is. This will let you see the console.log of your code.
• Type: tsc *.ts --target ES5 && node main.js when getting an error that says "Accessors are only available when targeting ECMAScript 5 and higher.

Type Assertion
Something new for me that I learned is using Type Assertions to see my intellisense. There are two ways to do this. Here are the 2 examples.

let message;
message = 'ohayou';
let endsWithU = (<string>message).endsWith('u');
let anotherWay = (message as string).endsWith('u');

Interfaces vs. Classes
Interfaces are only used for declaration and not implementation. Classes are used for both variable declarations and implementations like functions.

Access Modifiers
Fields, properties and methods can be labeled with access modifiers like public, private or protected.

Properties
Properties split the methods like so in a class:
get X() {
return this.x;
}

Click here to read my Week Two of Learning Angular

Since Heroku does not keep my uploaded files from the deployed link after a day, I had to find a solution to this. Because their file system is ephemeral, which I learned the hard way, I had to find a cloud service that would store my uploaded photos. Read more from Heroku on what it means to be ephemeral and their suggestions on how to store uploaded files.

After googling online for suggestions, I went with a free plan with Cloudinary. Their Node.js SDK documentation is very thorough.  You can find specific documentation utilizing Node for Cloudinary with the following link: https://cloudinary.com/documentation/node_integration, which I used as a reference multiple times. 

I really like Cloudinary's editing features. Once you create an account and have uploaded some photos, you can edit and use their filter effects, quickly crop and use other developer tools.

There are a few other Cloudinary plans that are upgraded versions of the free plan. As of right now, I don't foresee using more than the limit of the free plan. However, I saw that Heroku does suggest using S3 for storing photos in their own docs but I really think that AWS' documentation can be so confusing to weed through, at least for me it is. Once I've successfully learned to use AWS' services, I'll definitely write a blog entry about it.

After weeding through a bunch of forums and blogs about Multer and Cloudinary used together, this particular blog entry from another developer really helped me out so I wanted to share it here. It's a spot-on implementation resource for Cloudinary using Node, Express and Multer:
https://dev.to/itsmefarhan/cloudinary-files-images-crud-operations-with-nodejs-express-multer-2147

Read about my suggested resources for using Multer on this blog entry.

This month, I learned to used Multer for a react project that I've been working on. It took me close to 6 days to get both the back-end and front end to work for Multer. There were times when I really struggled but in the end, I didn't give up and it's so rewarding to finally figured it out. Being able to upload a file successfully, especially a photo, and have it save to the database was something I was thinking about learning to do since December. 

Many of the errors I had at the beginning were mainly missing the little stuff, like forgetting to deploy the latest changes to my server or having a syntax error.

Here are three resources that I've found really useful for my first implementation with Multer:

• https://blog.stvmlbrn.com/2017/12/17/upload-files-using-react-to-node-express-server.html (Setting up back-end and front-end)
• https://www.npmjs.com/package/multer-js (main documentation for node using Multer) (Main Doc)
• https://www.youtube.com/watch?v=srPXMt1Q0nY (Video on setting up on the back-end)

It took some heavy studying for me to finally get it to work but now I can use Multer for all of my future projects that require file uploading from now on

Note:
Remember to use axios to call to Multer, not fetch.