Clone Repository

In this bonus exercise we are going to be using a Git repository that is public on GitHub. As such, you'll need to clone the repository to your local machine using Git.

Some prerequisites:

• Node.js
• Npm or Yarn
• Git

Clone the repository using the Git command:

git clone https://github.com/blove/thinkster-directives.git

The default branch is the master branch. This branch of the repository contains the solution. So, DON'T LOOK at the code yet.

Next, checkout the exercises/03-12-mos-eisley-cantina branch using the following Git command:

git checkout exercises/03-12-mos-eisley-cantina

Next, install the dependencies using either npm or yarn:

npm install

Finally, start the application using the start script:

npm start

Tasks

1. Open the src/app/shared/directives/greedo.directive.ts file.
2. Using the @Input() decorator, create a new fire property that is typed boolean. Specify the binding name to the @Input() function to be custom rather than using the "fire" property name. Let's use the directive's attribute: "swrGreedo".
3. In the ngOnChanges() lifecycle method get the nativeElement using the injected ElementRef class instance.
4. Also in the ngOnChanges() lifecycle method set the src of the <img> element to the value of the src locally-scoped variable (this is defined for you). For some added challenge, only set the src after 500 milliseconds.
5. Open the src/app/shared/directives/han.directive.ts file.
6. Just like we did above in step 2, create a new fire property that is decorated using the @Input() decorator, specifying a custom binding name to match the directive attribute selector: "swrHan".
7. Again, In the ngOnChanges() lifecycle method get the nativeElement using the injected ElementRef class instance.
8. Also in the ngOnChanges() lifecycle method set the src of the <img> element to the value of the src locally-scoped variable (this is defined for you).
9. Open the src/app/features/mos-eisley/containers/cantina/cantina.component.html file.
10. In the template you will notice that the <img> elements have the appropriate attribute directives applied. However, we need to bind the attribute to the fire property value that is declared in the CantinaComponent class.

To test your solution you will need to go to the Cantina on Mos Eisley. You can access it via the application menu, or browse directly to it: http://localhost:4200/mos-eisley/cantina

Solution

If you want to see the solution to this exercise you can browse to the repository. Or, simply checkout the master branch via:

git checkout master

Challenge

While you can use the window.setTimeout() method in the GreedoDirective.ngOnChanges() method to delay setting the src property on the <img> element, I suggest you try using RxJS's interval() method to set an interval, and then complete the observable after the first next notification.