How to use css class in the innerHtml binding in angular

Credit goes to this link:

http://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling

“Angular adds all kinds of CSS classes to the HTML it adds to the DOM to emulate shadow DOM CSS encapsulation to prevent styles of bleeding in and out of components. Angular also rewrites the CSS you add to match these added classes. For HTML added using [innerHTML] these classes are not added and the rewritten CSS doesn’t match.”

As a workaround try

  • for CSS added to the component
:host /deep/ mySelector {
  background-color: blue;
}
  • for CSS added to index.html
body /deep/ mySelector {
  background-color: green;
}

Advertisements

How to pass data via event from child to parent component in Angular 2

At the child, I have a boolean data want to send to parent if a function method is clicked. What should I do?

Parent code is here. (onChangeDone) to receive an output from the child component and it can trigger a method to receive the event from the child too:

HTML Tag:
...

<childcomp (onChangeDone)="onChangeD($event)"> </childcomp>

....

TS code part:

export class ParentComp {

 onChangeD( result: boolean ) {
        if ( result ) // data changed
          { }
        else { }
    }


...

At the child component, answer is @Output() and together with the EventEmitter:

export class ChildComp implements OnInit {

    @Output() onChangeDone = new EventEmitter<boolean>();
    .....

    clickButton(): void {
     .....
     this.onChangeDone.emit(true);
     ....
    }

How to input a data from parent to child component in Angular 2

At the parent  I have a flag is createOrUpdate want to be sent to child component, parent code is here :

HTML Tag:
...

<childcomp [createOrUpdate]="createOrUpdate" > </childcomp >

....

TS code part:

export class ParentComp {
    createOrUpdate: boolean = true; // true for create, false for update
...

At the child component, answer is @Input  and same named variable to catch the input:

export class ChildComp implements OnInit {

    @Input() createOrUpdate: boolean;
    buttonText: string = 'Create New Car';
...
    ngOnInit() {
        if (this.createOrUpdate)
            this.buttonText = 'Create New Car';
        else this.buttonText = 'Update Car';
    }
....

 

How to create GUID or UUID in angular 2

There is a tool called angular2-uuid can do this:

npm install angular2-uuid --save

And in your code you can use it.

import { UUID } from 'angular2-uuid';
...
let uuid = UUID.UUID();

CentOS 7 firewall basic

Wayne Zh

CentOS using firewalld ( not iptables) as firewall. It is a zone based firwall. By default, your network interface’s subnet will be add to trusted zone. You can use these command to check the status and setttings:

sudo systemctl status firewalld

sudo firewall-cmd --list-all-zones

Basic control and start

sudo systemctl disable firewalld
sudo systemctl enable firewalld
sudo systemctl start firewalld
sudo systemctl stop firewalld

If you want to add a subnet to trusted zone:

sudo firewall-cmd --permanent --zone=trusted --add-source=192.168.101.0/24
sudo firewall-cmd --reload
sudo firewall-cmd --list-all-zones

 

Angular2 step by step 2 – How to install latest Node.js and NPM

By W.ZH Oct 2016

Install latest Node.js, from Node.js website:

First, make sure you have a C++ compiler. Open the terminal and install the build-essential and libssl-dev packages if needed. By default, Ubuntu does not come with these tools — but they can be installed in the command line.

Use apt-get to install the build-essential package and libssl-dev:

sudo apt-get install build-essential checkinstall

sudo apt-get install libssl-dev

You can install and update Node Version Manager, or nvm, by using cURL:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

You will be asked to close and reopen the terminal. To verify that nvm has been successfully installed after you reopen the terminal, use:

command -v nvm

That command will output nvm if the installation worked.

To download, compile and install the latest version of Node:

 

Install latest NPM

There’s a pretty robust install script at https://www.npmjs.org/install.sh. You can download that and run it.

Here’s an example using curl:

curl -L https://npmjs.org/install.sh | sh