Angular Jobs

Today in Top Angular News – Friday, January 25

Today in Top Angular News – Friday, January 25

Today’s topics include angular, fat, Testing, GitHub, angularcli, angular6, AngularJS, angular7, javascriptdeveloper, Firebase, PWAs, webdev, frontend, WebFrameworks, 100DaysOfCode, DynamicContent, Fullstack, React, and Python. Special thanks to contributors MockupTiger, +Juri Strumpflohner, Juri Strumpflohner, @viclotana, Nwose Lotanna, webcodegeeks, ng1tong2, MAADM4X, ITNEXT_io, WebFrame_Plow, dev_avocado, echojs2, FullstackDevJS, Puneetkankar, and Prakash_MANIT.


How to build wireframes online – MockupTiger wireframe tool

What a wireframe will do is to allow you to view the whole site without getting distracted by details. It's now time to gather your team, stakeholders, and colleagues to get their feedback. Here's why it isn't wise to ignore the wireframe stage:

Wireframes are a way for you and the team to understand clearly what your end goal is – what you want to build. In addition, these tools will allow you to think from the end-user perspective – in other words, what they might be able to experience when they go to your site. Continue reading


Learning Angular: Unit Testing watch expressions

Today I wanted to write a unit test for a watch expression on my controller. The new Angular best practices suggest to use the – what they call – “controller as” syntax. Now consider we have some watch expression defined in the controller, which we’d like to test. Note that I’m injecting which might make it appear like I’m using the $scope controller syntax. Alternatively, I could leave the “controller As” syntax of before, and instead of calling in my tests, call :

That worked as well. Continue reading


Deploying Angular 6 and Above Apps to GitHub Pages – The InfoGrid

The reason for not using the default build location (dist/project-name) is because GitHub Pages only allows you to set the source as either the root of your repo or the docs directory in the root of your repository. If you are using Angular 5 and below, run the command without the project-name:

And that’s it, the library will do everything including configuring the page option for you on GitHub. You can now visit your GitHub page url: to see your deployed angular app. And now, you can build and deploy to GitHub Pages with a single command:

There are other methods you can deploy your angular project on GitHub Pages. Continue reading


Building Interactive Lists with the new Angular 7 Drag and Drop tool

Building Interactive Lists with the new Angular 7 Drag and Drop tool
In this article, we will learn about and take a good look at how to use the Drag and Drop tool in the Angular Material Development Kit. The latest version of Angular (version 7)

// run the command in a terminalng version//cd to a preferred location// run the command belowng new dragdropAngular Material installed on the above app

ng add @angular/materialImport the Drag Drop module in the app module so it is available for use in the Angular application like so:

Rendering a List
Drag and Drop works mostly on list items, let’s create a small list of pop artists and then add the drag and drop functionality to it. Now we have a list set up, we’ll go through all the major aspects of the new drag and drop tool in the component development kit below:
Basic Drag and Drop
Sorting
Moving Items between Lists
Animations

Basic Drag and Drop
Just by adding the cdkDrag directive to a list item renderer, the list items becomes draggable. Update the app.component.html file with this:

cdkDropList *ngFor=”let artist of artists” class=”pop” the app.component.ts file with this

drop(event: CdkDragDropstring[]) {moveItemInArray(this.artists, event.previousIndex, event.currentIndex);}The MoveItemsInArray method takes 3 parameters:
the list array where it would do the re-ordering work
Event.previousIndex which is the previous location of the dragged item to drop. style=”display: flex” cdkDropList style=”width: 30%” *ngFor=”let artist of artists” class=”pop” cdkDrag{{artist}}// cdkDropList style=”width: 30%” *ngFor=”let artist of alteArtists” class=”pop” of what we did:
We added a new droplist from line 7–11 where we tried to render a new list
We wrapped the two droplist s in a and styled the display to flex so they out standing separately
We specified the droplist data for each list on lines 2 and 7
We specified the list that each list is connected to in lines 3 and 8
Finally, we created IDs on the drop lists to tell Angular these are separate drop lists. Continue reading


Angular Architecture – Smart Components vs Presentational Components

Let's create a Presentation Component

What we will want to do in this situation is to extract the table part of the screen into a separate component, let's call it the LessonsListComponent:

Now let's take a closer look at this component: it does not have the lessons service injected into it via its constructor. Let's create a Smart Component

If we go back to the Home component, this is what it will look like after refactoring:

As we can see, we have replaced the list part of the Home screen with our new reusable lessons list component. The home component still knows how to retrieve the lessons list from a service, and what type of list this is (if these lessons are the lessons of a course, etc.). Using @Output the presentation component remains isolated from the smart component via a clearly defined interface:

the lessons list presentation component only knows that it emitted an event, but does not know what are the receivers of the event or what will the receivers do in response to the event

the home screen smart component subscribes to the lesson custom event and reacts to the event, but it does not know what triggered the event. The lesson list still wants to notify the home component that a lesson was selected via the lesson event. Continue reading

Did we miss something? Do you have feedback on how we can improve? Contact us.