We Keep Coding

How to set #Input variable as an optional in angular 5?

I want to set #Input parameters optional.
For example:
Child1.html:
templateUrl:'common-html.html'
Child1.TS:
currentValue : boolean = true;
CASE 2:
Child2.html:
templateUrl:'common-html.html'
Child2.TS:
// Not declared **currentValue**
Common-HTML.html:
<app-master [isLogEnabled]="currentValue"></app-master>
But above changes giving an error while AOT:
Property 'isLogEnabled' does not exist on type Child2.Component
So I cannot change HTML of :
<app-master [isLogEnabled]="currentValue"></app-master>

I would do:
App-Master-Component.ts
#Input() isLogEnabled: boolean = false; // can change false to true, null or w.e. depending on what you want as the default
// if consumer passes in a value, it will be overridden
Then in Child2.component.html
<app-master></app-master>
You cannot bind [isLogEnabled]="currentValue" if currentValue does not exist in the Child2.component.ts file.

You can't provide property that you didn't declare.
But you can use something like this:
<app-master [isLogEnabled]="currentValue || false"></app-master>
Or inside component you can create getter:
get isLogEnabled() {
return this.isLogEnabled || false;
}
Or you can try to use '?'
#Input() isLogEnabled?: boolean;

Set boolean with default if options object does not exist

I want so set a boolean value I either get from a property in an options object, or if this is not defined want to set a default value.
const raw = options.rawOutput;
If options.rawOutput is not set, the default value should be true.
Problem is: the options object may not exist at all.
Im looking for a more elegant solutions than something like this
if (options) {
if (options.rawOutput) {
raw = rawOutput;
}
} else {
raw = true;
}

You could check if options exists and if the property rawOutput exists, then take that value, otherwise take true.
raw = options && 'rawOutput' in options ? options.rawOutput : true;
or the same but without conditional (ternary) operator ?:.
raw = !options || !('rawOutput' in options) || options.rawOutput;

I would like to use typeof check:
const raw = ((typeof options == 'undefined') || (typeof options.rawOutput == 'undefined'))? true:options.rawOutput;

Using the power of ES6:
const { rawOptions: raw = true } = options || {};
using object deseructuring to get the rawOptions and assigning it to raw variable and with a default value of true

Try this in case you want to assign false if options is exists but rawOutput is not.
const raw = options ? (options.rawOutput ? rawOutput : false) : true;

You can do this using just logical operators,
const raw = options && options.rawOutput || true;
This would set raw to true in case either of options or options.rawOutput is falsy.

When we discuss about options, nowadays the approach is having always the object defined, to defaults at least. So, for example, in your case, you will have:
// list of all defaults value for options
const defaultOptions = {
rawOutput: true
}
// assuming you are in a function when you get the options
function doSomething(userOptions) {
// here you will have all the options, with `userOptions`
// overrides the default options if they're defined.
const options = {...defaultOptions, ...userOptions};
if (options.rawOutput) {
// do stuff
}
}
This is helpful especially when you have more than one options to pass, and you could have defaults for most of them. In this way, you don't have to check if any object or properties exists every time, and you also have a clear list of the options' default that you can change – or get from a JSON – without impact your code.

Function to conditionally assign variable member data to nested array in object?

I want to add data into an object, and my object contains nested data. Example data:
pageviewEvent {
client: "clientName",
page {
document_referrer: 'some http refer header data goes here',
window_height: 1920,
window_width: 1200
}
}
Some data is undefined or null and I do not want to add this undefined/null data into the object.
I made a function that works to add data to the object conditionally (if not undefined) but I can't figure out how to add data to nested objects in the function?
I could just make a bunch of if statements, but figure it's better to put the condition test into a function to reduce code size.
Example code with comment showing thinking of what I am trying but doesn't work:
//function to check if variable undefined or null, if not -> add to pageviewEvent arrayKey, variableName
function isUndefinedNull(arrayKey, variableName) {
var evalVariableName = eval(variableName);
if (evalVariableName !== undefined && evalVariableName !== null && evalVariableName !== "") {
console.log(arrayKey);
console.log(variableName);
pageviewEvent[arrayKey] = evalVariableName;
//array key could be nested, for instance pageview[page][title] or pageview.page.tile
}
}
//make event array
const pageviewEvent = { }
//add static data
pageviewEvent.client = 'neguse';
//if not null or undefined add data
isUndefinedNull('referrer.full', 'document.referrer');
//want to put data into object pageviewEvent.referrer.full or pageviewEvent[referrer][full]
Thanks for any help. I feel like this answer can help but I can't figure it out.

I recommend using the lodash function _.set(), documentation can be found here: https://lodash.com/docs/4.17.4#set
_.set( pageviewEvent, "referrer.full", "some-value" );
If you want to customise the behaviour of how nesting is handled when there's an undefined value, you can instead use _.setWith() - see https://lodash.com/docs/4.17.4#setWith

Using Filter Function to Find Values Equal to False and Setting to True

In my Angular app I have a function that drills down to an array, and then uses a filter function to pull out values in a new array where "completed" is "false".
This is working as expected. And the way our data is, there is always one object in the array that has the property for "completed" set to "false", so I can target [0] to get to that. So, from there all I need to do is set it to "true". However, for whatever reason, how to accomplish this last step is eluding me.
This is my whole function, and what I've tried thus far:
private completeLastWorkflowStatus() {
let currentService = this.checkDiscipline();
for (let service of this.client.services) {
if (service.service === currentService) {
let targetWorkflow = service.workflow;
let inCompleteWorkflow = targetWorkflow.filter(workflow => workflow.completed === false);
console.log(inCompleteWorkflow);
if (inCompleteWorkflow[0].completed === false) {
inCompleteWorkflow[0].completed === true;
console.log(inCompleteWorkflow[0].completed);
}
}
}
}
For the last console.log listed above, I still get "false" as the value. What am I missing here? How can I set the value of "completed" to "true" for this one object in the array?

inCompleteWorkflow[0].completed === true; is not assignment. Do inCompleteWorkflow[0].completed = true;

Why is it returning undefined?

I want to store as the following method, and get the constant value, by querying using key to find value or by value to find the key
function my_reference() {
return {
30:'',
31:'ERR591',
32:'ERR761',
33:'ERR671',
34:'ERR551',
};
}
console.log( my_reference[31],
my_reference.31,
my_reference().31,
my_reference()[31]
);

my_reference[31],
Trying to read a property (which doesn't exist) of a function. The property is on the object that is the return value of calling the function.
my_reference.31,
Trying to use a number as an identifier. This isn't allowed.
my_reference().31,
Trying to use a number as an identifier. This isn't allowed.
my_reference()[31]
This works

You need to execute the function with my_reference() and after that access the property you want to.. but the keys in javascript objects are always strings:
console.log(my_reference()['31']);

You don't need to use a function to store the references:
var reference = {
30:'',
31:'ERR591',
32:'ERR761',
33:'ERR671',
34:''
};
console.log(reference[31]);

You have to call function if you want it to return result, function called by :
my_reference()
So the both first lines will not work because my_reference will return the function it self and not call it :
my_reference[31]
my_reference.31
The third also will not work console.log(my_reference().31); because attribute can't be numeric.
Hope this helps.

Here is the fixed code
function my_reference() {
return {
_30:'',
_31:'ERR591',
_32:'ERR761',
_33:'ERR671',
_34:'ERR551'
};
}
var f = my_reference();
console.log(f["_31"]);
console.log(f._31);
console.log(my_reference()._31);
console.log(my_reference()["_31"]);
Variables can't be named with just numbers
The first two should be the returned object