You want to create a reusable button component with the selector app-button that uses an external HTML template and multiple CSS files. Which is the correct component decorator configuration?

hard📝 Application Q15 of 15

Angular - Components

You want to create a reusable button component with the selector app-button that uses an external HTML template and multiple CSS files. Which is the correct component decorator configuration?

A@Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] })

B@Component({ selector: 'app-button', template: '<button>Click</button>', styles: ['./btn.css', './colors.css'] })

C@Component({ selector: 'app-button', templateUrl: './button.html', styles: ['./btn.css', './colors.css'] })

D@Component({ selector: 'app-button', template: './button.html', styleUrls: ['./btn.css', './colors.css'] })

Step-by-Step Solution

Solution:

Step 1: Identify how to specify external HTML template
Use templateUrl with the path to the HTML file.
Step 2: Identify how to specify multiple external CSS files
Use styleUrls with an array of CSS file paths.
Step 3: Check each option for correct usage
The configuration using templateUrl: './button.html' and styleUrls: ['./btn.css', './colors.css'] is correct. Others incorrectly use template for a file path or styles for external CSS files.
Final Answer:
@Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] }) -> Option A
Quick Check:
External HTML + multiple CSS files = templateUrl + styleUrls = B [OK]

Quick Trick: External HTML needs templateUrl; multiple CSS files need styleUrls [OK]

Common Mistakes:

Using styles for external CSS files
Using template instead of templateUrl for files
Mixing inline and external template properties

Master "Components" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Angular Quizzes

You want to create a reusable button component with the selector app-button that uses an external HTML template and multiple CSS files. Which is the correct component decorator configuration?

Step 1: Identify how to specify external HTML template

Step 2: Identify how to specify multiple external CSS files

Step 3: Check each option for correct usage

Final Answer:

Quick Check:

Want More Practice?