ngOnChanges example

Source: https://www.concretepage.com/angular-2/angular-2-4-onchanges-simplechanges-example

import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';

import { Employee } from './employee';
 
@Component({
  selector: 'app-emp',
  templateUrl: './employee.component.html'
})
export class EmployeeComponent implements OnChanges {
  @Input() employee: Employee; 
  @Input() message: string; 

  ngOnChanges(changes: SimpleChanges) {
     for (let propName in changes) {  
       let change = changes[propName];
       let curVal  = JSON.stringify(change.currentValue);
       let prevVal = JSON.stringify(change.previousValue);

       console.log(curVal);
       console.log(prevVal);
     }
  }
}

How to access files from assets folder in angular 2?

Source: https://stackoverflow.com/questions/41917683/how-to-access-files-from-assets-folder-in-angular-2

You have to put your files and use the relative path from the assets folder.

For example if i put a css file in src/assets/css/myfile.css, then I have to access it like this :

<link rel="stylesheet" href="assets/css/myfile.css">

How do I override angular2-mdl's default CSS?

Source: https://stackoverflow.com/questions/40244860/how-do-i-override-angular2-mdls-default-css
https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

By default angular 2 component are set with encapsulation: ViewEncapsulation.Emulated which will append unique component attribute to component style. So that its styles can be specific to the component.

We can avoid adding the unique component attribute to the styles by setting encapsulation: ViewEncapsulation.None in component meta data.

import {ViewEncapsulation} from '@angular/core';

@Component({
  templateUrl: 'component.template.html',
  styleUrls: [`component.style.scss`],
  encapsulation: ViewEncapsulation.None
})

Now set the following in your scss file.

.mdl-tabs__tab-bar {
    justify-content: flex-start;
}

it will applied for all the occurrences of elements with mdl-tabs__tab-bar class.

Angular Doing an else with ngClass

Source: https://stackoverflow.com/questions/38203030/angular2-doing-an-else-with-ngclass

Indeed

<p class="{{condition ? 'checked' : 'unchecked'}}">

<p [ngClass]="condition ? 'checked' : 'unchecked'">

<p [ngClass]="[condition ? 'checked' : 'unchecked']">

ngFor with index as value in attribute

Source: https://stackoverflow.com/questions/35405618/ngfor-with-index-as-value-in-attribute

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

How to revert to origin's master branch's version of file

Source: https://stackoverflow.com/questions/1817766/how-to-revert-to-origins-master-branchs-version-of-file

Assuming you did not commit the file, or add it to the index, then:

git checkout -- filename

Assuming you added it to the index, but did not commit it, then:

git reset HEAD filename
git checkout -- filename

Assuming you did commit it, then:

git checkout origin/master filename

Assuming you want to blow away all commits from your branch (VERY DESTRUCTIVE):

git reset --hard origin/master


To view the differences going from the remote file to the local file:
git diff remotename/branchname:remote/path/file1.txt local/path/file1.txt

Angular Component Lifecycle

Source: https://angular-2-training-book.rangle.io/handout/advanced-components/component_lifecycle.html

Component Lifecycle

A component has a lifecycle managed by Angular itself. Angular manages creation, rendering, data-bound properties etc. It also offers hooks that allow us to respond to key lifecycle events.

Here is the complete lifecycle hook interface inventory:

ngOnChanges - called when an input binding value changes
ngOnInit - after the first ngOnChanges
ngDoCheck - after every run of change detection
ngAfterContentInit - after component content initialized
ngAfterContentChecked - after every check of component content
ngAfterViewInit - after component's view(s) are initialized
ngAfterViewChecked - after every check of a component's view(s)
ngOnDestroy - just before the component is destroyed

📄 from Component Lifecycle

What is the (function() { } )() construct in JavaScript?

Source: https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created.

It has nothing to do with any event-handler for any events (such as document.onload).
The first pair of parentheses (function(){...}) turns the code within (in this case, a function) into an expression, and the second pair of parentheses (function(){...})() calls the function that results from that evaluated expression.

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.
This is why, maybe, you confused this construction with an event-handler for window.onload, because it’s often used as this:

(function(){
    // all your code here
    var foo = function() {};
    window.onload = foo;
    // ...
})();
// foo is unreachable here (it’s undefined)

Correction suggested by Guffa:

The function is executed right after it's created, not after it is parsed. The entire script block is parsed before any code in it is executed. Also, parsing code doesn't automatically mean that it's executed, if for example the IIFE is inside a function then it won't be executed until the function is called.

Atom Editor: Useful packages (WIP)

atom-save-all

Save all modified paneItems on CTRL-s

URL: https://atom.io/packages/atom-save-all

autoclose-html

Automates closing of HTML Tags

URL: https://atom.io/packages/autoclose-html

Get Component without spec.ts file in Angular

Source: https://stackoverflow.com/questions/40990280/get-component-without-spec-ts-file-in-angularjs-2

Inside your angular-cli.json set the spec.component parameter to false:

{
   ...
   "defaults" : {
       ...
       "spec": {
           ...
           "component": false
       }
   }
}

or use the --spec=false option during creation

ng generate component --spec=false component-name

bootstrap form-group vs row CSS which one prefer

Source: https://stackoverflow.com/questions/28090256/bootstrap-form-group-vs-row-css-which-one-prefer

accepted

I usually follow this pattern:

<div class="form-group">
   <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
   </div>
</div>

Note the col-md-6 and col-md-5 are examples and you can use any col-md-x class with unlimited number. just sum MUST be 12.

Angular 4 – Adding custom classes to document body depending on a component

Source: http://nadzweb.com/2017/06/angular-4-adding-custom-classes-to-body-depending-on-component/

Sometimes the app that is being developed requires different classes on body of html document for styling each route or page.
This can be achieved using the following snippet below.

Login Component

... // other code above
export class LoginComponent implements OnInit, OnDestroy {
 ngOnInit(): void {
    const body = document.getElementsByTagName('body')[0];
    body.classList.add('auth');
  }

  ngOnDestroy(): void {
    const body = document.getElementsByTagName('body')[0];
    body.classList.remove('auth');
  }
... // other code below

Dashboard Component

... // other code above
export class DashboardComponent implements OnInit, OnDestroy {
 ngOnInit(): void {
    const body = document.getElementsByTagName('body')[0];
    body.classList.add('dashboard');
  }

  ngOnDestroy(): void {
    const body = document.getElementsByTagName('body')[0];
    body.classList.remove('dashboard');
  }
... // other code below

Now that the body has classes depending on the route or page component, this makes it easier to style the entire page.

Hope this is beneficial to the readers!

Java Qui Nhon