--->>>>>>>>>>>>>>..

@Component({
selector:'app-root',
template:'<h1> My first angular app</h1>'
})

------------->>>>>>>>>>>>>>>>>>.

@Component({
selector: 'app-root',
template: `<h1>{{message}}</h1>`
})
export class AppComponent {
message = 'hey there';
}

---------->>>>>>>>>>>>>>>>>>

<!--use your message property here using property binding-->

<span [innerHTML]="message"></span>

@Component({
selector: 'app-root',
templateUrl: './app.component.html' // refer app.component.html for adding
message value using property binding
})
export class AppComponent {
message='hey there';
//Define your message with hey there
}

--------------->>>>>>>>>>>>>>>>>>>>>>>>>>.

export class AppComponent {

//Define your name and show variables here
//Define your welcomeMe(username) method here
welcomeMe(username)
{
this.name=username;
this.show=true;
// console.log("dsds")
}
name='John Doe';
show=false;

<h3 id="output">
<!--add your welcome message with name like `Welcome <name>`-->
Welcome {{name}}
</h3>

----------------->>>>>>>>>>>>>>>>>>>>>.

This study source was downloaded by 100000846996349 from CourseHero.com on 06-13-2022 06:41:32 GMT -05:00

https://www.coursehero.com/file/62156747/Angular-Hands-ontxt/
 <h3 id="output">
<!--add welcome message here with first and last values of name-->
Welcome {{name.first}} {{name.last}}
</h3>

export class AppComponent {

name={
first:'John',
last:'Smith'
}
}

--------->>>>>>>>>>>>

<h1>Fresco PLAY Activity Tracker</h1>

<div>
<div *ngFor="let todo of todos; let i=index" class="todoItem">
<input type="checkbox" [(ngModel)]="todo.done" />
<span [ngClass]="{'checked': todo.done}">{{i+1}}. {{ todo.desc }}</span>
</div>
<span *ngIf="todos.length == 0">No Activities to track! Start by adding
one</span><br/>
<input id="newTodo" type="text" [(ngModel)]="newToDo">
<span *ngIf="error" style="color:red;">Please enter an activity!</span>
<br/>
<button id="addActivity" (click)="addMore()">Add an Activity!</button>
<button id="clearAll" (click)="clearAll()">Clear All</button>
</div>

export class AppComponent {

//Define your variables done,todos,newToDo,newToDoObj,error
public todos;
public done;
public newToDo;
public newToDoObj;
public error;
constructor(){
this.todos=[];
this.newToDo='';
this.error=false;
}

//Define your constructor here with todos as [] ,newToDo as '' and error as
false
//Define your addMore function here
addMore(){
console.log(this.newToDo);
this.todos.push({desc:this.newToDo,done: false});
}
clearAll(){
this.todos=[];
}
//Define your clearAll function here
}

This study source was downloaded by 100000846996349 from CourseHero.com on 06-13-2022 06:41:32 GMT -05:00

https://www.coursehero.com/file/62156747/Angular-Hands-ontxt/
 ----------------->>>>>>>>>>>>>>>>>>>>>>>>
Which is not true about Angular2? $Scope
Which scripting language can be used to write Angular2 apps? TypeScript or jS
Angular 2 uses ______ Dependency Injection. Heirarchical
Which of the following is one of the blocks of Angular 2 Architecture? none
False sh is ar stu ed d v i y re aC s o ou urc rs e eH w e r as o. co m Angular2
is written on top of Angular 1.5.x. The @Component decorator defines how an
application should be compiled and launched. False An app can have one or no
modules present. False Root module class by convention named as _____. App
Module The decorator that is used to indicate a module is _____. @NgModule Th
What is it called, when you "compile the applicaton as part of the build
process"? AOT What are the types of Angular View Classes that can be associated
to a Module? CDP What is it called, when you "compile the application in the
browser before launching the app"? Just In Time Select the correct Component
Lifecycle sequence (Note: Not all Lifecycles methods are present). Ng on init �
ng on changes How many lifecycle methods does Angular offer apart from a
Component's construtor() 8 A _______ acts as a mediator between application /
business logic and the application presentaion layer. Component ______ element
property is used to tell angular to insert the instance of component in the HTML
file. sh is ar stu ed d v i y re aC s o ou urc rs e eH w e r as o. co m
Selectors There can be only one component per DOM element. True Components can
be used with ____________. Both attributes and tags ______ are mandatory
parameter in components. Templates Consider following code. <p class="bold text-
center"> {{data.userName}} </p> Th The data object is fetched from a service and
turns out to be null. In such a case, how can you ensure that the app doesn't
crash or log any errors? <p class="bold text-center"> {{data?.userName}} </p>
What happens when the following code is encountered by Angular? <tr> <td
id="tableData4" colspan={{2 * 2}}> </td> </tr>` template parse error is thrown
since colspan is a native HTML attribute Templates can also be added using URLs
of the file containing code. True Multiline template should be included within
_________. �. Which of the following is the correct usage of template syntax?
<li (click)="selectHero(hero)" *ngFor="let hero of heroes"></li> What does the
following code demonstrate? sh is ar stu ed d v i y re aC s o ou urc rs e eH w e
r as o. co m <input #empId placeholder="Enter your TCS employee id" required>
Use of Template reference Templates handle the view part of the application.
True Which of the following helps you define Metadata for a class? Using
Decorator Which of the following is NOT an Angular metadata Decorator? @Bindable
Which among the following is not a metadata? @template Which of the following
are valid metadata properties? All are valid Everything in Angular 2 is a simple
class, until you declare metadata. Th True Which Angular module helps you
achieve two-way data binding? Forms Property binding is defined using _________.
Two way binding is defined using ____[()]_______. Interpolation uses
__{{}}______. Which of the following correctly represents two-way data binding?
<input type="password" [(ngModel)]="userPwd" required> Which of the following
correctly represents one-way data binding, from source to view? <fresco-quiz
[quizId]="frescoId"></fr Which of the following correctly represents one-way
data binding, from view to source? <button (click) ="buttonClicked()">Click Me!
</button> In-order to bind data from view to component class you can use _____.
Event Binding sh is ar stu ed d v i y re aC s o ou urc rs e eH w e r as o. co m
Two way binding is done using _____. [(ngModule)] Data binding helps in
synchronizing _____________. Template and components Which of the following is
an Attribute Directive? NGModel NgFor and NgIf are examples of ...? Structural
Which among the following is not a Directive? Module What happens to the <div>
element once application is launched? <div Th *ngIf="servePie"> Pie Chart �
Sales Projection ..... </div> If 'servePie' evaluates to false, the element is
destroy from DOM How will you make sure that a single instance of any Service is
available throughout the app? Register the service using 'imports' and add it to
the Root Component-wrong Which of the following is not true about Services?
Services are designed to do a lot of things at one time What are some advantages
of lazy loading? All of the option Services are included in components using
______. provider Services are identified using the decorator ______.

This study source was downloaded by 100000846996349 from CourseHero.com on 06-13-2022 06:41:32 GMT -05:00

https://www.coursehero.com/file/62156747/Angular-Hands-ontxt/
Powered by TCPDF (www.tcpdf.org)