0% found this document useful (0 votes)
2 views8 pages

Angular Codingame

The document provides a series of questions and answers related to Angular, TypeScript, JavaScript, and CSS. It covers topics such as routing, component communication, directives, and form handling in Angular, as well as basic programming concepts. Additionally, it includes code snippets and examples for better understanding of the concepts discussed.

Uploaded by

hmidialaa92
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views8 pages

Angular Codingame

The document provides a series of questions and answers related to Angular, TypeScript, JavaScript, and CSS. It covers topics such as routing, component communication, directives, and form handling in Angular, as well as basic programming concepts. Additionally, it includes code snippets and examples for better understanding of the concepts discussed.

Uploaded by

hmidialaa92
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Which tag is used to render different route contents?

<router-outlet></router-outlet>
How can you display a property defined inside the component? interpolation ({{ }}) or
property binding ([ ]) in template
Which option is correct concerning the Sample Class ?‘ Sample is a generic class
Sample is an abstract class
export class Sample<T> { Sample implements the T interface
public something:T; If we don’t write super() inside the constructor . Typescript will return en
error
constructor(into:T)
{this.somthing = info;
}}
Which service can we use to get route parameter inside a component? ActivatedRoute service from @angular/router
Which name(s) will be displayes by this code? ‘ they have a length greater than 6
<div *ngFor = “let name of names”> characters
<div *ngIf = name.length > 6”>{{ name }}</div> </div>’ Theresa
a(i , j ) should return TRUE if at least one of the arguments equals 1 or if function a(i: number, j: number): boolean {
their sum is equal to 1.Both given arguments will always be numbers. return i === 1 || j === 1 || i + j === 1;
For example : a (1 , 5) returns TRUE a ( 2 ,3 ) returns False a (-3, 4) returns }
TRUE
Consider the code below: type Bike = MountainBike & RoadBike;
type MountainBike = { make : string };
type RoadBike = {brand : string }; In TypeScript, you can use the
We want to implement a Bike type which accepts values of both the intersection type ( &) to combine multiple
MountainBike and the RoadBike types.How would you declare this type? types into a single type.
Which of the following is not a structural directive in Angular? unless
ngIF , ngFor , NgSwitch , unless
In Angular, you can pass data from the parent component to the child @Input() inputData: string;
component by using:
In Angular, you can pass data from the child component to the parent @Output() decorator in combination with
component by using: an EventEmitter.
@Output() dataEvent = new
EventEmitter<string>();

Which directive connects the value of the controls to the data? <input type="text" [(ngModel)]="name" />
import the FormsModule from @angular/forms

Which is the correct form control class name that is set to true via <input type="text" [(ngModel)]="name" class ="ng-dirty" />
[(ngModel)] whenever value is changed?
You can use the ng-dirty class, along with other Angular form control
classes like ng-valid, ng-invalid, and ng-touched
Which method of RouterModule should be called for providing all routes RouterModule.forRoot(routes)
in AppModule?
if you have child modules with their own routes, you should use
RouterModule.forChild()
What is the return type of this function ? ‘ boolean | number
const whattyoe =(str:string) => {if (str.length === 0 ) {return false;} else
{return str.length;}};
Write the name of an optional property of info? Properties (age, profession, and isNative) marked
interface Info { with a question mark (?) are optional. This means that
name: string; when creating an object based on the Info interface,
age?: number; these properties can be omitted or left undefined. The
name and isStudent properties remain required.
profession?: string;
isStudent: boolean;
isNative?: boolean; }
Parmi les propositions suivantes, quelles sont celles qui désigent des - Directives structurelles
types de directives Angular valides ? - Directives d'attribut
At line #7, what would you replace ?? with to get the ngFor directive
working? of
<ul>
<li *ngFor=”let user ?? users”>{{user.name}}/ {{user.email}}</li></ul>
how can you create a new Angular application ? ng new appName
How Would you protect a certain route from the unauthorized user ? By using route Guards and ‘(CanActivate interface from
@angular/router )
which of the following is a popular library for creating Material Design Angular Material.
UI's using Angular?
what wildcard can we use to handle 'not found' routes? ‘**’ can be used to handle "not found" routes or routes that do not
match any defined routes.

// Wildcard route for handling "not found" routes


{ path: '**', component: NotFoundComponent }
Which type should be used when an object does not yet have a definied 3 – Any
type, but will do so later?
1- All
2- Void
3- Any
4- unknown

what does the 401 http status code main? Unauthorized


in html, how should you write the < sign (less than) so it isn’t considered &lt; || &#60;
as an HTML tag?
what does css stand for? Cascading Style Sheets
in javaScript , what is the result of the following expression : true == 1 True
In javaScript, how do you display “hello word” on a web page? document.write(“hello word”)
in javascript, how do you declare a variable? var, let, or const
var x = 7
what is the default CSS display value of a html <p> element? block
in CSS, how do you select all span elements within a p element? p span {
color: red; (exemple )
}
in CSS, with the following rule, which element(s) will be red? All <strong> element below the element
whose id is “intro”
------------------------------------------ Problem Solving --------------------------

Write the body of the average (table) function

The function should retun the average of the values contained in table, table is always a defined array
object in table are always numbers

Average sould retun 0 if table is empty

function average(table) {

if (table.length === 0) {

return 0; // Return 0 if table is empty

const sum = table.reduce((acc, val) => acc + val, 0); // Calculate the sum of values

const avg = sum / table.length; // Calculate the average

return avg;

Vote
@Component({
selector: 'display-component',
template: `
<div id="lastVote">{{ answer }}</div>
<voter-component
[question]="question"
[yesAnswer]="yesAnswer"
[noAnswer]="noAnswer"
(output)="setVote($event)"
></voter-component>
`
})
export class DisplayComponent {
public question = 'Too easy?';
public yesAnswer = 'Yes';
public noAnswer = 'no';
public answer: boolean;
setVote(event: boolean) {
this.answer = event ? this.yesAnswer : this.noAnswer;
} }
@Component({

selector:'transaction-component',

template: `

<div id="fee">{{fee | percent:'2.2-2'}}</div>

<div id="amount">{{amount | currency:currency:'symbol':'9.2-2'}}</div>

<div id="time">{{timeOfTransaction | date:'ww: yyyy MMMMM dd hh-mm-ss'}}</div>

})

<div> </div>

public static int solve(int weight0, int weight1, int weight2) {

// Write your code here

// To debug: System.err.println("Debug messages...");

return weight0 > weight1 ? weight0 > weight2 ? 0 : 2 : weight1 > weight2 ? 1 : 2;

@Component({

selector:'label-component',

template: `

<div class="label" [style.color]="color">{{label}}</div>

`})

@Component({

selector:'display-component',

template: `

<div id="lastVote">{{answer}}</div>
<voter-component [question]="question" [yesAnswer]="yesAnswer" [noAnswer]="noAnswer"
(output)="setVote($event)"></voter-component>

})

export class DisplayComponent {

public question = "Too easy?"

public yesAnswer = "Yes";

public noAnswer = "No";

answer: string;

setVote(event: boolean) {

event? this.answer = this.yesAnswer : this.answer = this.noAnswer

// VoterComponent: do not change

@Component({

selector:'voter-component',

template: `

{{question}}

<button (click)="vote(true)">{{yesAnswer}}</button>

<button (click)="vote(false)">{{noAnswer}}</button>

})

@Component({

selector:'test-component',

template: `

<div *ngIf="inputData == null || inputData.length == 0" id="noData">No data</div>

<div id="dataList" *ngIf="inputData != null && inputData.length > 0">


<div *ngFor="let item of inputData" [ngStyle]="item.length % 2 == 0 ? {'color': 'green'} : {'color':
'red'}">{{item}}</div>

</div>

`,

})

export class TestComponent {

@Input() inputData: Array<string>;

constructor() {

} }

@Component({

selector:'counter-component',

template: `

<input id="intervalInput"/>

<button id="intervalSetButton" (click)="setMessage()">Set interval</button>

})

export class CounterComponent implements OnDestroy {

@Input() message: string;

@Output() tick = new EventEmitter<string>();

intervalId;

setMessage() {

this.cancelInterval();

const interval = (<HTMLInputElement>document.getElementById("intervalInput")).value

this.intervalId = setInterval(() => {

this.tick.emit(this.message);

}, Number(interval));

}
cancelInterval() {

if (this.intervalId) {

clearInterval(this.intervalId);

ngOnDestroy() {

this.cancelInterval();

// Implement the component here

@Component({

selector:'account-component',

template: `

<div id="message">{{message}}</div>

<input id="createAccountInput">

<button id="createAccountButton" (click)="onCreateAccount()">Create account</button>

<input id="topupAccountInput">

<input id="topupAmountInput">

<button id="topupAccountButton" (click)="onTopupAccount()">Create account</button>

`,

})

export class AccountComponent {

public message: string;

constructor(private accountingService: AccountingService){

onCreateAccount() {

const accountID = (<HTMLInputElement>document.getElementById('createAccountInput')).value;

this.accountingService.createAccount(accountID).then(() => {
this.message = "Successfully added account";

});

onTopupAccount() {

const accountID = (<HTMLInputElement>document.getElementById('topupAccountInput')).value;

const amount = (<HTMLInputElement>document.getElementById('topupAmountInput')).value;

if (Number(amount) <= 0) {

this.message = "INVALID_INPUT";

} else {

this.accountingService.topUp(accountID, Number(amount)).then((res) => {

this.message = "Topup with " + res;

});

You might also like