Cannot select component-button with protractor

Question

I cant select with any locator Component "Add New" button.

Here is audience.po.ts File and method "ClickAddNewBtn()"

  clickAddNewBtn() {
      console.log("Click on Add New button.");
      return element(by.css('nano-add-new-button')).click();
  }

"Add New button" component is child (component):

    <div class="nano-f-40 nano-f-r">
        <nano-add-new-button (click)="openModal('new')"
                             class="nano-bc-green hover-effect">
        </nano-add-new-button>
    </div>

Here is Body of "Add new button" component:

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

@Component({
    selector: 'nano-add-new-button',
    template: `
    <div class='nano-f-r nano-f add-new'>
        <i class='fa fa-plus'></i>
           <span class='nano-ml-5 add-new'>
                Add New
           </span>
    </div>`
})
export class NanoAddNewButtonComponent {
}

Error screenshot, in this case tried to select button by xpath:

Any idea how to select this button and click him?

Answer 1

Solution is select "nano-ml-5" class from Add New span by "all" locator.

clickAddNewBtn() {
    return element.all(by.css('nano-ml-5'));;
}