Wait for element to be clickable

I need to check logout from menu drop down. when i try to locate element i’m getting error Unable to locate element.

i think that there is synchronize problem because when i add browser.sleep(5000); the tests passed but the problem is that its not stable.


    //from homePage.po.ts
    static logOut() {
        const EC = protractor.ExpectedConditions;
        browser.waitForAngular();
        const loader = element(by.className('loader-modal-container'));
        browser.wait(EC.invisibilityOf(loader), 10001);
        browser.waitForAngular();
        browser.driver.findElement((by.id('user-drop-down'))).click();
        (browser.driver.findElement(by.id('log-out'))).click();
        browser.waitForAngular();


      }
    ```
    //login.e2e-spec.ts

    import {LoginPage} from "../pages/login.po";
    import {HomePage} from "../pages/homePage.po";
    import {browser } from 'protractor';


    describe('login page tests', () => {

      beforeEach(function() {
        LoginPage.navigateTo();
      });


     it('successful logout', () => {
        LoginPage.logIn();
        HomePage.logOut();
        expect(browser.driver.getCurrentUrl()).toMatch(LoginPage.loginPageUrl);
      });
    });
    ````
    //component.html 
     <div class="top-bar-menu">
        <div class="top-bar-menu-item" id="user-drop-down"(click)="op1.show($event,opshow)" >
            <div class="user-dropdown" #opshow  >
              <span id="user-dot" class="top-bar-dot dot semi-bold">{{given_name.substring(0,1).toUpperCase()}}{{family_name.substring(0,1).toUpperCase() }}</span>
              {{ given_name+' '+family_name }}
            </div>
        </div>


     NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="user-drop-down"]"}
        (Session info: chrome=74.0.3729.131)
        (Driver info: chromedriver=2.46.628402 (536cd7adbad73a3783fdc2cab92ab2ba7ec361e1),platform=Windows NT 10.0.16299 x86_64)

Source: AngularJS